CSS Button Generator
Design a button visually — set colour, typography, shape, shadow and a hover behaviour, preview its normal, hover and active states, then copy ready CSS, HTML or Tailwind classes.
Presets
Label
Colours
Type
Shape & depth
Interaction
Output
What Makes a Good Button?
A button is a promise: it must look pressable, read instantly and respond clearly.
Three things carry most of the weight: contrast between the label and the fill (WCAG asks for at least 4.5:1 for normal text), a hit area of at least ~44px tall on touch screens, and a radius/padding that matches the rest of your UI so the button feels like part of the system.
The hover and active states are the feedback half of the contract. A small lift, a shade darker, or a fill on outline buttons tells the pointer “yes, this is interactive” — and the active state confirms the press. Keep the transition short (100–200ms) so it feels crisp, not floaty.
Outline and soft (tinted) buttons are best for secondary actions; a single solid, high-contrast button should carry the primary action on a screen. This generator's presets map to exactly those roles.
Because the tool outputs real :hover and :active rules (and their Tailwind hover:/active: variants), the states travel with the code — no JavaScript needed.
The Declarations Behind the Button
What the generated rule sets do.
display: inline-flex
Centres the label on both axes and lets the button sit inline with text or siblings.
padding: 12px 20px
Vertical then horizontal padding sets the hit area. Aim for ~44px total height on touch.
border-radius
0–12px reads sharp/professional; 999px makes a pill. Match your design system.
:hover
Lift (translateY + bigger shadow), darken/lighten the fill, or fill an outline. One is enough.
:active
Undoes the lift (or scales down slightly) so the press feels physical.
transition
100–200ms on background, colour, transform and shadow keeps feedback crisp.
How to Use the CSS Button Generator
Get your result in under ten seconds.
Pick a preset
Start from Primary, Outline, Soft or another role, then make it yours.
Tune the look
Adjust colours, type, padding, radius and shadow; check the contrast tip.
Inspect the states
Switch the preview between Normal, Hover and Active, then copy CSS, HTML or Tailwind.
Why Use the CSS Button Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Real states
Outputs true :hover and :active rules (and Tailwind variants), not just a static style.
Role presets
Primary, outline, soft, success and danger map to real UI roles.
Contrast checked
A live tip warns when the label/fill contrast drops below WCAG.
Three outputs
Copy a named CSS class, a ready <button> element, or Tailwind classes.
Smooth
Renders once per frame while you drag.
Private
Runs entirely in your browser — nothing is uploaded.
Frequently Asked Questions
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text (≥18.66px bold or 24px). The generator warns you when the label/fill pair falls below ~4.5:1.
At least ~44×44px of hit area on touch. With 16px text that's roughly 12px vertical padding.
Solid for the single primary action on a screen; outline or soft for secondary actions so the primary stays dominant.
One subtle change is enough — a slight lift, or 8–12% darker/lighter fill. Outline buttons usually fill on hover.
No. The output uses :hover/:active (or Tailwind hover:/active:), which are pure CSS.
Only in your own browser (local storage). Press Reset to clear it.