How to use CSS Button Generator
- Choose the background and text colors.
- Adjust padding, radius and font size.
- Copy the CSS.
About this tool
The generated rule styles a .btn class with padding, rounded corners and a transition, plus a :hover rule that darkens the background. Keep a clear focus style as well so keyboard users can see which button is selected.
Make sure the text and background colors have enough contrast. You can check them with the contrast checker.
Frequently Asked Questions
- How big should a button be?
- At least 44 by 44 pixels is recommended for touch targets.
- How do I add an icon?
- Place the icon inside the button element and give the button display: inline-flex with a gap.
Related tools
- CSS Box Shadow GeneratorAdjust the sliders and copy the box-shadow CSS.
- Color Contrast CheckerTest whether your text and background colors are readable for everyone.
- CSS Border Radius GeneratorRound each corner separately and copy the CSS.
- Custom Scrollbar GeneratorDesign a scrollbar that matches your site and copy the CSS.
- SVG Blob GeneratorGenerate organic blob shapes and copy the SVG.
- CSS Text Shadow GeneratorAdd depth or a glow to text and copy the CSS.