About the CSS Button Generator
This CSS button generator produces a complete, working button rule rather than a single declaration. Set your label, background and text colours, then adjust vertical and horizontal padding, corner radius, font size, weight and shadow strength with live sliders. The output covers three selectors: the base state, a hover state with an automatically darkened background and a slight lift, and an active state that returns the button to rest. A transition line ties them together, so what you copy behaves properly the moment it lands in your stylesheet.
How to use the CSS Button Generator
- 1
Type the Button label so the preview shows your real text at its real width.
- 2
Choose the Background and Text colour; the tool derives a darker hover shade from the background automatically.
- 3
Set Vertical padding and Horizontal padding, then Corner radius, Font size and Font weight.
- 4
Adjust Shadow strength for depth, then copy the block containing the base, hover and active rules.
What people use it for
Primary call to action
A strong background with generous horizontal padding and a modest radius produces the single highest-emphasis control on a page, which most designs should have only one of per view.
Matching an existing brand palette
Paste your brand hex into the background field and the derived hover shade stays inside the same hue family instead of drifting the way a hand-picked value tends to.
Compact buttons for dense toolbars
Dropping vertical padding to around 6 pixels and font size to 14 gives a control that fits a toolbar row while still clearing a usable hit area.
Prototyping a button scale
Generate small, medium and large variants by changing only padding and font size, keeping radius and colour fixed, and you have a consistent size ramp.
Hit area, padding and touch targets
Padding is what gives a button its size, and size is an accessibility requirement rather than a stylistic one. WCAG 2.2 success criterion 2.5.8 sets a minimum target of 24 by 24 CSS pixels at level AA, while the stricter 2.5.5 criterion at level AAA asks for 44 by 44. Apple's Human Interface Guidelines have long recommended 44 points and Material Design recommends 48 density-independent pixels, both of which reflect research on fingertip contact area rather than arbitrary preference. With a 16-pixel font at a normal line height of about 1.5, the text box is roughly 24 pixels tall, so 12 to 14 pixels of vertical padding brings the total to around 48 to 52 pixels — comfortably past every threshold without setting an explicit height. Horizontal padding is a visual judgement rather than a rule, but keeping it roughly double the vertical padding gives the proportions most design systems converge on, and it stops short labels producing awkwardly square buttons.
Why the generated CSS includes hover, active and a transition
A button that changes nothing when interacted with feels broken, so the output defines three states. Hover darkens the background by a fixed amount in HSL and lifts the element one pixel, which together read as the surface responding to the pointer. Active removes the lift, giving the impression of the button being pressed down under the click. The transition covers background, transform and box-shadow at 200 milliseconds, which sits in the range where a change registers as motion rather than as a jump. What the generated CSS does not include, and what you must add, is a focus state. Hover never fires for keyboard users, so a button styled only for hover is effectively invisible to anyone tabbing through the page. Add a :focus-visible rule with an outline of at least 2 pixels and 3:1 contrast against the adjacent surface. Equally important, apply this CSS to an actual button element: keyboard activation with Enter and Space, focus order, and the correct role all come free there and require substantial extra work on a styled div.
Tips
- Check your background and text colours reach 4.5:1 — a mid-tone brand colour with white text often falls just short.
- Add a :focus-visible outline yourself; hover styles alone leave keyboard users with no visible focus.
- Wrap the transform in a prefers-reduced-motion media query if the lift is noticeable, and keep the colour change either way.