CSS Button Generator
Buttons carry most of the clicks on a page, so they should look deliberate. Style yours with colour, padding, radius, border and font controls, preview it live, and copy the CSS with a matching hover state included.
How to use
- Type the button text and pick the colours.
- Adjust padding, radius, font size and border with the sliders.
- Copy the CSS — it includes a ready hover rule.
Tips
- Check the colour contrast of the text against the button background for readability.
- Make buttons at least 44 px tall so they are easy to tap on phones.
- Keep one primary button style across the site and vary only where needed.
- The hover state helps mouse users; also keep a clear focus style for keyboard users.
Note: The generated class name is .my-button — rename it in your stylesheet if needed.
Frequently Asked Questions (FAQ)
What does it do?
It designs custom CSS buttons visually with colour, padding, radius, border, and font controls and a live preview.
Does the code include a hover state?
Yes. The copied CSS includes a ready hover rule.
Which button properties can I change?
The button text, background and text colours, padding, corner radius, font size, border width and colour, and the hover background.
Can I see the button before copying the code?
Yes. The preview button updates live as you change the colours, padding, radius, font size, and border.