CSS Button Generator
Design buttons and copy clean CSS.
Set the label, colors, corner radius, padding and font size of a button, preview it live, and copy ready-to-use CSS including a hover state.
Background
Text color
Hover color
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}How to generate button CSS
- Type the button text you want.
- Choose the background, text and hover colors.
- Adjust radius, padding and font size with the sliders.
- Copy the CSS and add a hover rule to your stylesheet.
Frequently asked questions
Does the CSS include a hover effect?
Yes. A :hover rule with your chosen hover color is generated together with the base style.
Can I change the font or weight?
The output sets font-weight 700. Adjust the font-family and other properties freely after pasting.
Is anything uploaded?
No. The generator is fully client-side and stores nothing.