CSS Button Generator
Design CSS buttons visually with separate normal and hover states. Colors, gradients, padding, radius, shadows, transitions. 40-button gallery.
Hover over the button to see the hover effect
.button {
background-color: #3b82f6;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px;
border: none;
box-shadow: 0px 2px 4px 0px #00000020;
cursor: pointer;
transition: all 0.2s ease;
}
.button:hover {
background-color: #2563eb;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px;
border: none;
box-shadow: 0px 4px 12px 0px #00000020;
}stylePresets
collectionsButton Gallery
40 professionally crafted button styles. Click any to apply it to the generator above.
ads_clickPrimary Actions
crop_squareOutline & Minimal
shopping_cartE-Commerce
dashboardDashboard & SaaS
paletteCreative & Fun
What is the CSS Button Generator?
A CSS button generator builds the styles for both the resting and hover state of a button, with sliders and color pickers replacing the trial-and-error of writing CSS by hand. The generator outputs both .button { ... } and .button:hover { ... } declarations with a transition: all 0.2s ease so the hover feels smooth.
How to use the CSS Button Generator
- 1
Pick a state to edit
Tabs at the top of the controls toggle between Normal and Hover. Each state has independent colors, padding, shadow, and border.
- 2
Adjust the design
Background color (or two-color gradient), text color, font size and weight, padding, border radius, border, and box shadow. The preview updates instantly.
- 3
Test the hover
Hover over the live preview button to see the Normal-to-Hover transition. The same transition: all 0.2s ease ships in the output CSS.
- 4
Or load a preset
Eight quick presets in the panel (Flat, Gradient, Outline, Rounded, Pill, 3D, Neumorph, Glass). Below, a 40-button gallery groups options by use case.
Frequently Asked Questions
Can I customize hover effects?
Yes. Switch to the Hover tab in the controls to edit the hover state independently of the Normal state. The preview button responds to your real mouse hover so you can see the transition (with the built-in transition: all 0.2s ease) play out before copying the CSS.
What preset styles are available?
Eight in the panel: Flat, Gradient, Outline, Rounded, Pill, 3D, Neumorph, Glass. Below the generator, a 40-button gallery groups more designs by use case: primary actions, outline/minimal, e-commerce, dashboard/SaaS, and creative/fun. Click any to load both Normal and Hover states into the editor.
Does it support gradients?
Yes. Tick the Gradient checkbox under Background to enable a two-color linear gradient (135° angle, fixed). Each state has its own pair of gradient colors, so you can fade or shift the gradient on hover.