CSS button generator
Generate CSS3 buttons visually: size, radius, solid or linear-gradient background, typography, border, shadow and hover effects (darken / lift / outline / glow), with a live preview plus CSS and HTML snippets and six presets.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Live preview
Hover the button to try the hover effect
Presets
Click a preset to apply it, then fine-tune
CSS code
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 160px;
height: 48px;
padding: 12px 24px;
border: 0;
border-radius: 8px;
background: #4D6BFE;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.15);
transition: all 300ms ease;
}
.btn:hover {
filter: brightness(0.9);
}<button class="btn" type="button">立即开始</button>
What this tool does
- Dial in a button and copy the CSS and HTML straight out, without hand-writing box-shadow, hover rules or transitions.
- Keep buttons consistent across a design system: apply one of six presets (brand blue, success green, danger red, two-tone gradient, neon pill, outlined white) and swap in your own colours.
- Compare the four hover effects — darken, lift, outline, glow — side by side before committing to one.
- Debug "buttons are not the same height" issues: the output spells out width, height, padding and line-height: 1 so you can compare each value.
Example
Input
Default "Brand blue" preset: 160×48px, radius 8px, background #4D6BFE, white 16px/600 text, no border, shadow 0 4px 12px, hover darken, 300ms transition
Output
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 160px;
height: 48px;
padding: 12px 24px;
border: 0;
border-radius: 8px;
background: #4D6BFE;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.15);
transition: all 300ms ease;
}
.btn:hover {
filter: brightness(0.9);
}A 15% shadow opacity becomes rgba(15, 23, 42, 0.15); picking "hover: none" emits no :hover rule at all.
Frequently asked questions
What does a width of 0 mean?
It means auto: the CSS contains width: auto and the button is sized by its label plus padding. Use a pixel value when several buttons must line up at the same width.
Can I use a solid colour and a gradient at the same time?
No, they are mutually exclusive. In gradient mode the output is linear-gradient(<angle>deg, start, end) and the solid background is ignored; the outline hover effect then uses the gradient start colour for the outline.
Can I enter rgba() or a colour name?
No — colours must be hex: #RGB, #RGBA, #RRGGBB or #RRGGBBAA (the leading # is optional). Opaque colours are emitted as six-digit hex and translucent ones as rgba(), which pastes safely into any stylesheet.
How do the "lift" and "glow" hovers differ?
Lift adds translateY(-2px) and raises the shadow alpha by 12 percentage points, so the button appears to rise. Glow only swaps in a 0 0 24px shadow in the accent colour and leaves the button in place.
Is the generated code sent anywhere?
No. Every value is assembled in your browser with JavaScript, the page makes no network requests, and it works offline.
Keywords：cssbuttoncss3按钮按钮生成器gradienthover阴影前端样式ui