How to Style a Button with CSS
A good button is easy to spot and easy to tap. This guide covers background, text color, padding, radius and font size, plus a simple hover state.
What is the CSS Button Generator?
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.
How to use it
- 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.
Worked example
With a #6D28D9 background, #ffffff text, 12px 24px padding, an 8px radius and 16px text, the result is a .btn rule with those values plus a .btn:hover rule that lowers opacity to 0.9.
How much padding should a button have?
Padding of 12px top and bottom with 24px left and right is a solid starting point for most buttons. Larger padding suits big call-to-action buttons, while smaller padding fits dense toolbars.
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.