~/css/button-generator
CSS Button Generator
Build a button without writing CSS by hand: type the label, pick the background and text colours, set padding, corner radius, font size and weight, and add a border, a shadow or a hover lift. Hover and keyboard focus states are included.
Using the CSS Button Generator
Size and tap targets
On touch screens a button should be at least 44 by 44 pixels. The padding controls set the size around the label; with a 16px font, 12 to 14px of vertical padding gets you there. Generous horizontal padding makes a button feel more clickable than a larger font does.
Contrast matters
The label must stand out from the background: a contrast ratio of at least 4.5:1 for normal text. Light blue with dark text, or dark blue with white text, both work. Check unusual combinations with the colour contrast checker.
States, not just looks
A real button has hover, active, focus and disabled states. The generated CSS includes a hover style, a pressed state and a clearly visible :focus-visible outline for keyboard users, which is easy to forget and essential for accessibility.
Keep motion small
The optional lift moves the button up by two pixels with a transform, so nothing around it shifts. It is disabled automatically for visitors who prefer reduced motion.
Frequently asked questions
Should I use a button or a link?
Use a button for actions on the page, such as submitting or opening a menu. Use a link when the click takes the visitor to another page. The generated CSS works on both.
Can I make an outline button?
Yes. Set the background to the page colour, increase the border width and set the text colour to your accent.
Where can I find ready-made designs?
The CSS buttons collection has eight finished buttons, including loading and copy states.