CSS Button Generator
Set the colours, size, corners and border, choose how it reacts to hover, and see whether the text is easy enough to read.
About CSS Button Generator
A good button does more than look right at rest. It must react when pointed at, press down when clicked and show a clear outline when reached with the keyboard. This generator writes all four states in one go, so the button feels finished, and shows a live preview you can hover over and click.
Set the colours, padding, text size, weight, corner radius and border, and choose whether it has a soft shadow and lifts on hover. Two contrast figures tell you whether the text is easy to read on the button and on its hover colour. Copy the CSS and the one line of HTML.
How to use CSS Button Generator
- Type the button text and choose the background and text colours.
- Set padding, text size, weight, corners and border.
- Choose the shadow, the amount of darkening on hover and whether it lifts.
- Check the contrast figures, then copy the CSS and HTML.
Common uses
- Creating a consistent call-to-action button for a site
- Checking that text on a brand colour is readable
- Generating hover and focus states without writing them by hand
- Teaching how button states work
Frequently asked questions
What contrast does button text need?
The accessibility guidelines ask for at least 4.5 to 1 between ordinary text and its background at level AA. Large or bold text can pass at 3 to 1. The tool shows the figure for the resting and the hover colours.
Why is there a focus-visible rule?
People who use a keyboard need to see which control is selected. The focus-visible rule draws an outline only when the keyboard is in use, so mouse users do not see an outline after clicking.
How is the hover colour chosen?
It is the background colour made darker in HSL lightness by the percentage you set. Setting it to zero keeps the same colour and leaves only the lift.
Should I use a button or a link?
Use a button element for actions such as submitting a form, and a link for going to another page. The same class works on both, which is why the CSS removes underlines.