About the CSS button generator
The CSS Button Generator lets you design a button visually — text, background, text colour, hover colour, font size, padding, corner radius and shadow — with a live, hoverable preview, then copy the complete CSS including the hover state. It is the quickest way to create good-looking buttons without writing CSS by hand.
How Button works
How to design a button
- Type the button text and pick the background, text and hover colours.
- Adjust the font size, padding, radius and shadow.
- Hover the preview to test it, then copy the CSS.
What you get
The output includes a .button rule and a :hover rule, so the button changes colour on hover out of the box. Add the class to any <button> or <a> element.
Design tips
Use enough padding for a comfortable tap target (around 12px vertical), keep good contrast between text and background, and use a slightly darker hover colour to signal interactivity.
Common uses
- Create call-to-action buttons
- Style links to look like buttons
- Match buttons to your brand colours
- Build hover effects without writing CSS
- Prototype UI quickly
- Generate consistent button styles
- Make rounded or pill buttons
- Copy ready-made button CSS
Frequently asked questions
How do I make a CSS button?
Set the background, text colour, padding and radius. This tool builds the CSS, including the hover state, for you to copy.
Does it include a hover effect?
Yes — the generated CSS changes the background colour on hover.
Can I apply it to a link?
Yes — add the class to an <a> element and it will look like a button.
What padding should a button have?
Around 12px vertical and 24px horizontal gives a comfortable tap target.
Is anything uploaded?
No — it runs entirely in your browser.
Can I make a pill-shaped button?
Yes — raise the radius to about half the height for a full pill.
Is the CSS production-ready?
Yes — copy it straight into your stylesheet.
Is it free?
Yes — completely free with no sign-up.