🔘

CSS Button Generator

Generate styled CSS buttons with hover effects

Style Presets

Size

Preview

State Preview

Live Interactive

Hover and click to test transitions

Button Text

Colors

Background#6366f1

Text Color#ffffff

Gradient

Typography

Font Size16px

Font Weight

Letter Spacing0.00px

Transform

Spacing

Padding X24px

Padding Y12px

Border Radius8px

Border

Border Width0px

Box Shadow

X Offset0px

Y Offset4px

Blur12px

Spread0px

Shadow Color#6366f1

Transition0.20s

HTML

<button class="button">Click me</button>

CSS

.button {
  background-color: #6366f1;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 4px 12px 0px #6366f140;
  transition: all 0.2s ease;
  cursor: pointer;
  outline: none;
  line-height: 1.5;
}

.button:hover {
  background-color: #4f46e5;
  color: #ffffff;
  transform: scale(1.02);
  box-shadow: 0px 6px 20px 0px #6366f160;
}

.button:active {
  background-color: #4338ca;
  color: #ffffff;
  transform: scale(0.98) translateY(1px);
  box-shadow: 0px 2px 4px 0px #6366f160;
}

Share to Community

Was this tool helpful?

What is CSS Button Generator?

Free online CSS button generator to design beautiful CSS buttons with a visual editor.

Customize colors, gradients, borders, padding, font size, border radius, and box shadow. Add hover and active state effects with transitions. Preview normal and hover states side by side. Copy the complete CSS including hover rules. Includes presets for popular button styles. No signup required.

How to Use CSS Button Generator

1Choose a button preset or start from scratch
2Customize colors, padding, border, and shadow
3Design the hover state with different styles
4Copy the complete CSS code including hover rules

Frequently Asked Questions

Background color/gradient, text color, font size/weight, padding, border (width, color, style), border-radius, box-shadow, and transitions. Plus separate hover state styling for interactive effects.

Yes. Design the hover state separately - change colors, shadow, transform (scale, translate), and see a smooth transition preview. The generated CSS includes both normal and :hover rules.

Yes. Choose from presets like Primary, Secondary, Outline, Ghost, Rounded, Pill, Gradient, and 3D. Each preset sets all properties and can be further customized.

Share this tool

Related Tools

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

SHD

CSS Box Shadow Generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

GRD

CSS Gradient Generator

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

🎬

CSS Animation Generator

Free online CSS animation generator - generate CSS keyframe animations visually

⬛

CSS Flexbox Generator

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

▦

CSS Grid Generator

Free online CSS grid generator - visual CSS grid layout builder with live preview and code export

.button { background-color: #6366f1; color: #ffffff; font-size: 16px; font-weight: 600; padding: 12px 24px; border: none; border-radius: 8px; box-shadow: 0px 4px 12px 0px #6366f140; transition: all 0.2s ease; cursor: pointer; outline: none; line-height: 1.5; } .button:hover { background-color: #4f46e5; color: #ffffff; transform: scale(1.02); box-shadow: 0px 6px 20px 0px #6366f160; } .button:active { background-color: #4338ca; color: #ffffff; transform: scale(0.98) translateY(1px); box-shadow: 0px 2px 4px 0px #6366f160; }