CSS Button Generator
Design buttons with padding, radius, gradient or solid fill, shadow and four hover effects. Live preview you can actually hover. Copy the CSS.
Background
Hover Effect
.btn {
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
background: linear-gradient(135deg, #7c3aed, #06b6d4);
color: #ffffff;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.40);
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(124, 58, 237, 0.60);
}About the css button generator
A button carries more design weight than almost any other element, and most of what makes one feel good is small: enough padding to look tappable, a radius consistent with the rest of the interface, a shadow tinted with the button's own colour rather than black, and a hover state that responds within about 200 milliseconds.
The preview here is a real button you can hover, so you are judging the interaction rather than a static image.
How to use it
- 1Set the label and the padding. Vertical padding around 14 pixels suits most interfaces.
- 2Choose a solid or gradient fill and pick the colours.
- 3Set the shadow. Tinting it with the button colour looks far better than black.
- 4Pick a hover effect and hover the preview to feel the timing.
- 5Copy the CSS, which includes the hover rule.
Worth knowing
- Aim for at least 44 pixels of height so the button is comfortable on touch screens.
- The exported CSS includes the transition, which is what makes the hover feel smooth rather than abrupt.
Questions
What size should a button be?
At least 44 by 44 pixels of tappable area, which is the accepted minimum touch target. Padding of roughly 14 by 28 pixels gets you there at normal font sizes.
Why does my button shadow look dirty?
It is probably pure black. Tint the shadow with the button's own hue at low opacity and it will read as light falling on a coloured object rather than a grey smudge.
Should buttons have rounded corners?
Match whatever the rest of your interface uses. Consistency matters more than the specific value, though 8 to 12 pixels is the current default in most design systems.