How to use the CSS Button Generator
- 1. Pick the styleSet the text, colours, padding, corner radius, font and border.
- 2. Try itHover over and click the preview to see the hover and active states.
- 3. Copy the codePress Get CSS & HTML and paste it into your project.
What the generated CSS includes
A good button is more than a coloured box. The code you get includes:
- Base style: padding, font size and weight, colours, border and corner radius.
- :hover: the background darkens by the percentage you choose, so users can see it is clickable.
- :active: the button moves down by 1px when pressed, which feels responsive.
- :focus-visible: a clear outline for keyboard users, which many generators leave out.
- An optional soft shadow in the button's own colour, and a short transition so changes feel smooth.
Worked example and tips
The defaults make an orange (#ff5421) button with 12px × 24px padding, a 10px radius and 600-weight text. With hover darken at 12%, each colour channel is multiplied by 0.88, so the hover colour is #e04a1d. The shadow uses the same orange at 35% opacity.
- Keep text contrast high. White on a mid-tone colour usually passes; light yellow on white does not.
- Make tap targets at least 44px tall on phones: 12px top and bottom padding with 16px text gets you there.
- Use a real
<button>for actions and<a>for links to pages. Both can use the same class.
Frequently asked questions
Can I use it on a link?
Yes. Put class="btn-custom" on an tag. The styles work the same.
Why include :focus-visible?
Keyboard users need to see which button is selected. :focus-visible shows the ring for keyboard use without showing it on every mouse click.
Does it work with Bootstrap or Tailwind?
Yes. It is plain CSS with its own class name, so it will not clash.
Is it free?
Yes. Design as much as you like; the first time you copy the code we ask for your name and WhatsApp number once, then every tool opens freely.