Design

🔘

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 type="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 #6366f161;
}

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

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. Build a gradient button with an animated hover, a rounded pill button, a 3D push button, or a ghost outline button, then copy the complete CSS including hover and active rules. Preview normal and hover states side by side. 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.

Set a linear-gradient background, then switch to the hover state and change the gradient colors or position. Add a transition so the gradient shifts smoothly when a visitor hovers. The generated CSS includes both the base and :hover rules ready to paste.

Pick the 3D preset, which layers a darker box-shadow under the button to fake depth. On the active state the shadow shrinks and the button shifts down a few pixels, so it looks pressed when clicked. Adjust the shadow color and offset to match your theme.

Share this tool

Related Tools

CSS

AI CSS Generator

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

◻️

Border Radius Generator

Free online border radius generator - generate CSS border-radius values with visual editor

SHD

CSS Box Shadow Generator

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

🎛️

Neumorphism Generator

Free online neumorphism generator - generate soft UI neumorphic CSS styles

🪟

Glassmorphism Generator

Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency

🎬

CSS Animation Generator

Free online CSS animation generator - generate CSS keyframe animations visually

.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 #6366f161; } .button:active { background-color: #4338ca; color: #ffffff; transform: scale(0.98) translateY(1px); box-shadow: 0px 2px 4px 0px #6366f161; }