Button Generator

Generate button styles with variants and hover effects

Colors

Background

Text

Spacing

Padding X16px

Padding Y12px

Typography

Font Size16px

Font Weight500

Border Radius

Radius8px

Live Preview

Generated CSS

.button {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}