CSS Button Generator

Build and style CSS buttons visually. See default, hover and active states at the same time.

Button Text
Background
#4B5BCD
Text Color
#FFFFFF
Border Color
#4B5BCD
Border Width: 2px
Border Radius: 8px
Padding X: 24px
Padding Y: 10px
Font Size: 16px
Font Weight
.button {
  background: #4B5BCD;
  color: #FFFFFF;
  border: 2px solid #4B5BCD;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.button:hover { background: #4452b9; }
.button:active { background: #3c49a4; transform: scale(0.98); }
Default
Hover
Active