Button Generator
Design custom CSS buttons with live preview of normal, hover, and active states.
Free & unlimited
Normal
Hover
Active
Style presets
Content
Button text
Icon
Size & typography
Padding X
24pxPadding Y
12pxFont size
16pxFont weight
Border radius
8pxBorder width
0pxLetter spacing
0pxText transform
Colors
Background color
Text color
Box shadow (optional)
Hover & active states
Hover background
Active background
Hover text color
Generated CSS
.button {
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
border-radius: 8px;
color: #FFFFFF;
background-color: #3B82F6;
border: none;
cursor: pointer;
transition: all 150ms ease;
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
text-decoration: none;
}
.button:hover {
color: #FFFFFF;
background-color: #2563EB;
}
.button:active {
background-color: #1D4ED8;
transform: scale(0.98);
}All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Choose a base style
Pick from solid, outline, ghost, or gradient button presets as a starting point.
- 2
Customize appearance
Adjust colors, padding, border-radius, font size, and shadow to match your design system.
- 3
Configure hover and active states
Set different colors, shadows, or transforms for hover and click interactions.
- 4
Copy the CSS
Export the complete CSS including all pseudo-class states, ready to paste into your stylesheet.
- Add a subtle translateY(-1px) on hover and translateY(1px) on active to simulate physical button depth.
- Use transition: all 0.2s ease for smooth state changes without feeling sluggish.
- Ensure at least 4.5:1 contrast ratio between button text and background for WCAG AA compliance.
- Keep padding proportional - horizontal padding should be 2-3x the vertical padding for balanced look.
- Full control over normal, hover, active, and focus states
- Gradient, solid, outline, and ghost button presets
- Adjustable padding, border-radius, font size, and shadows
- Live interactive preview showing all states
- Complete CSS output with transitions and pseudo-classes
- Design consistent call-to-action buttons across your website.
- Create button style guides for design systems.
- Quickly prototype different button variants for A/B testing.
- Generate accessible, production-ready button CSS without writing code from scratch.
Use <button> for actions (submit, toggle, delete) and <a> styled as a button for navigation. This matters for accessibility and semantics.
Use relative units (em or rem) for padding and font-size, and set width to auto or a percentage. Avoid fixed pixel widths.
Between 150ms and 250ms feels responsive without being jarring. Anything over 400ms tends to feel sluggish.