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.