What is the CSS Button Generator?
Build production-ready CSS buttons with hover states, focus rings, and loading variants. No JavaScript required.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Button Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Choose button variant
Select from solid, outline, ghost, or soft variants. Each sets different background, border, and text colour combinations.
Set size and shape
Adjust padding, font-size, and border-radius. Use the pill toggle to set border-radius to 9999px for fully rounded buttons.
Configure hover and active states
Preview the hover background colour and active scale transform. The generator writes all three states automatically.
Copy and paste
Click Copy to get the complete button CSS including base, hover, active, and focus-visible states.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
background: #0071e3;
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover {
background: #005bb5;
}
.btn-primary:active {
transform: scale(0.97);
}
.btn-primary:focus-visible {
outline: 3px solid #0071e3;
outline-offset: 2px;
}focus-visible only shows the focus ring for keyboard navigation, not mouse clicks. This satisfies WCAG 2.4.7 without the visual noise of :focus on every click.
Ready-to-use CSS patterns
Drop any of these straight into your project — no modifications needed.
Outline button
Border-only button that inherits its colour from the parent context.
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
background: transparent;
color: #0071e3;
font-size: 0.9375rem;
font-weight: 600;
border: 2px solid #0071e3;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.btn-outline:hover {
background: #0071e3;
color: #fff;
}Loading state button
Disabled appearance with an animated spinner for async operations.
.btn-loading {
position: relative;
color: transparent;
pointer-events: none;
}
.btn-loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: #fff;
border-radius: 50%;
animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}Common mistakes & how to fix them
A few habits trip people up. Here is what to watch for — and the exact fix.
Using div or a instead of button
Clickable divs and anchor tags used as buttons lack keyboard operability and screen reader button role.
Fix: Use <button type="button"> for actions. Use <a href="..."> only when the element navigates to a URL.
Missing :focus-visible
Removing the focus outline entirely fails WCAG 2.4.7 and makes keyboard navigation invisible.
Fix: Use :focus-visible to show focus rings for keyboard users while keeping the UI clean for mouse users.
Pro tips for better results
Use transition on specific properties, not all
transition: all catches unintended property transitions like colour changes from a parent. Specify: transition: background 0.15s, transform 0.1s.
Add min-width to prevent narrow buttons on short labels
A button labelled "OK" collapses to a very narrow width. Set min-width: 80px to prevent awkwardly narrow buttons.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.