CSS Button Generator
Style a button with colors, padding, corner radius and font size, and copy the CSS including a hover rule.
Quick answer: enter your details below and click Generate button CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Enter a background color and a text color as hex values.
- Set the padding, corner radius and font size.
- Click Generate button CSS and copy both rules into your stylesheet.
About this tool
Buttons carry most of the clicks on a page, so their size, color and corners deserve a quick preview in code form. Pick a background and text color, set the padding, radius and font size, and this tool writes a button class plus a hover rule. Paste both rules into your stylesheet and use the class on any button element.
Frequently asked questions
What hex formats are accepted?
Both the short form like #69D and the full form like #6D28D9 are accepted. Anything else shows a clear error message.
Why does the hover rule only change opacity?
Lowering opacity slightly on hover works with any background color, so the hover state always stays readable without a second color choice.