Create stylish buttons with live preview and CSS output.
Build production-ready buttons with full state lifecycle: default, hover, active, focus-visible, and disabled.
Focus styles are included for accessibility (WCAG).
Preview of focus-visible ring when Show focus ring is on
.btn {
background-color: #3b82f6;
border: none;
border-radius: 8px;
padding: 12px 24px;
color: #ffffff;
font-weight: 600;
cursor: pointer;
box-shadow: 0px 4px 12px rgba(0,0,0,0.20);
transition: box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.btn:hover:not(:disabled) {
box-shadow: 0px 6px 20px rgba(0,0,0,0.25);
transform: translateY(-1px);
background-color: #2563eb;
}
.btn:active:not(:disabled) {
box-shadow: 0px 2px 8px rgba(0,0,0,0.20);
transform: translateY(0);
background-color: #1d4ed8;
}
.btn:focus { outline: none; }
.btn:focus-visible {
box-shadow: 0px 4px 12px rgba(0,0,0,0.20), 0 0 0 2px #3b82f6;
}
.btn:hover:focus-visible:not(:disabled), .btn:active:focus-visible:not(:disabled) {
box-shadow: 0px 6px 20px rgba(0,0,0,0.25), 0 0 0 2px #3b82f6;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}Buttons use a base style plus pseudo-classes for interaction: :hover, :active, and :focus-visible. Primary buttons often use a solid background and shadow; secondary and outline buttons reduce emphasis. Disabled state should use reduced opacity and pointer-events: none.
Hover applies when the pointer is over the button. Active applies while the mouse button (or key) is pressed. Focus-visible shows when the button is focused by keyboard (or programmatically) and should always be visible for accessibility—prefer :focus-visible over :focus so mouse users don’t see a focus ring on click. Use .btn:hover:focus-visible to combine hover and focus styles without removing the ring.
Use semantic <button> (or role="button" with keyboard support). Never remove focus outline without providing a visible alternative (e.g. box-shadow ring). Ensure disabled buttons have sufficient contrast (WCAG 2.1 allows 3:1 for disabled). Avoid using only color to indicate state.
With plain CSS you define .btn and pseudo-class rules. With Tailwind you use utility classes or @apply in a component; for one-off buttons, arbitrary values like [box-shadow:0_4px_12px_rgba(0,0,0,0.2)] work. This generator outputs both so you can paste into a stylesheet or Tailwind config.
Create stylish buttons with live preview and CSS output.
Free CSS button generator — design custom buttons with gradients, shadows, border radius, and hover effects using visual controls. Copy the CSS and HTML instantly. No signup.
Tune sliders, points, or layers with live preview.
Compare states or presets before exporting.
Paste the declaration into your stylesheet or component.
Advertisement
Yes—copy base and :hover rules together so focus and active states match your design system.
Paste into arbitrary properties or extend theme.boxShadow and theme.borderRadius as needed.
Button style tokens are generated in-browser; your theme values stay on your device.
Verify in target browsers; filters and clip-path support varies.
For design prototyping—not a substitute for production design tokens.
Part of Design & UI Tools
More free tools for the same workflow.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-05-19.