About the CSS Button Generator
Buttons are the control users click most, so the details that make one feel solid are worth getting right before the code reaches a component library. This generator produces the base rule plus three state rules that are easy to forget: a hover treatment, a visible :focus-visible ring for keyboard users, and a one pixel press on :active that gives the click a physical feel. Hovering the preview shows the transition exactly as a visitor would see it.
Horizontal and vertical padding are separate on purpose. A button whose side padding is roughly twice its top padding reads as balanced at almost any size, and keeping the two fields apart makes that ratio easy to hold when you scale the type. Font size is set in pixels here so the value is unambiguous; swapping it for rem in your own stylesheet is a one word edit.
The hover choices are deliberately mechanical rather than tied to a colour formula. Darken applies filter: brightness(0.9), which works with any colour space including gradients and named colours. Lift moves the button up two pixels and deepens the shadow. Outline hollows the fill and keeps the shape with an inset ring. Check the finished pairing with the Color Contrast Checker so the label still clears 4.5:1 against its background.
How to use
- Type the button label and set the background and text colours.
- Adjust font size, weight, radius and the two padding values until the shape looks right in the preview.
- Choose a hover behaviour, then hover the preview button to see it. Copy takes the CSS and the anchor markup together.
Common questions
- Should I use a link or a button element?
- Use a button element for actions that stay on the page and an anchor for navigation. The generated CSS works on either, but only the anchor markup is shown.
- Why focus-visible instead of focus?
- The focus-visible pseudo-class shows the ring for keyboard and assistive technology users while keeping it off for a plain mouse click, which is what most designers actually want.
- Will the hover work on a phone?
- Touch devices fire hover on tap in an inconsistent way. Wrap the hover rule in a media query using hover: hover if the sticky highlight bothers you.
- Can I use a gradient background?
- Yes. Replace the background value in the copied CSS with a linear-gradient. The darken hover keeps working because brightness applies to whatever is painted.