CSS Button Generator

A button style is padding, color, radius, and shadow. This page previews a style and copies the CSS.

Style Presets

Choose from 18 trending button styles — hover the preview to see effects!

Live Preview

Hover the button to see the effect!

Customize

Button Text

Primary Color

Text Color

Font Size16px

Padding X24px

Padding Y12px

Generated CSS

Complete CSS with hover, active states and keyframe animations

.btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #6366f1;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}