Free Online CSS Button Generator
Design a button visually and copy the exact CSS for your project.
About the CSS Button Generator
This tool builds the CSS for a single call-to-action button and shows the result live. Adjust the label, background, text colour, padding, corner radius, font size, and border, and the preview and code pane update together. Hover colours are written into the generated stylesheet, so the copy you take away covers both states.
It suits front-end developers who need a quick starting point, designers matching a brand palette, and anyone prototyping a landing page without opening a code editor. The output is plain CSS with no framework or JavaScript required.
How to use it
- Enter the button text. Empty text falls back to the word "Button" in the preview.
- Choose the background and text colours with the pickers.
- Set vertical and horizontal padding in pixels; the two values become a single padding shorthand.
- Adjust radius (0-50 px), font size (10-36 px), and border width (0-10 px) with its colour.
- Pick hover background and hover text colours, then press Copy CSS.
A realistic starting point
For a signup button on a white page, a background of #0F6FFF, white text, 12 px by 24 px padding, a 10 px radius, and 16 px bold text gives a compact primary action. A darker hover such as #003FA9 signals interactivity without changing size. The generated rule also lifts the button by one pixel on hover through transform: translateY(-1px), which you can delete if you prefer a flat effect.
What the output covers
The stylesheet always targets a class named .button, so rename it to match your markup and avoid collisions. It defines only the base and hover states; focus rings, active and disabled states, dark-mode variants, and rem units are not generated. The preview shows the resting state only, so verify hover on your own page. Everything is calculated locally and the copy button uses your clipboard, so no styles are uploaded anywhere.
Frequently asked questions
Can I use the CSS with Tailwind or Bootstrap?
Yes, but paste it as custom CSS or convert the values into utility classes. The generated rule is framework-agnostic and depends on neither library.
Why does the preview not change on hover?
The hover colours are written into the exported CSS rather than applied to the preview element, so the live preview always shows the base style.
Can I make a fully round pill button?
Set the radius to 50 px with generous padding. It is a fixed pixel radius, not a percentage, so very tall buttons may not reach a perfect pill shape.
Related tools: Border Radius Generator, Box Shadow Generator, CSS Gradient Generator.