Normal
Hover
Button Preview
Buttons are the most-clicked element on any web page. A well-styled button communicates hierarchy, intent, and brand — instantly. This CSS button generator covers every style you need: solid filled, outline, ghost, gradient, soft tinted, and glow variants. Control the size, colour, border radius, shadow, and hover transition, then copy both the CSS and HTML ready for your project.
Both the normal state and hover state are previewed side by side so you can evaluate the transition effect before copying — no guesswork, no back-and-forth between editor and browser.
.btn and .btn:hover rules. HTML gives you the markup to pair with it.A production-grade button needs more than just a background colour. Here are the essential properties and why each one matters:
.btn {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; /* space between icon and text */
/* Sizing */
padding: 10px 24px;
font-size: 0.9rem;
font-weight: 700;
line-height: 1; /* prevents padding inconsistency */
/* Appearance */
background: #7c6fff;
color: #fff;
border: none;
border-radius: 8px;
box-shadow: 0 4px 14px rgba(124, 111, 255, 0.35);
/* Behaviour */
cursor: pointer;
text-decoration: none; /* when using <a> as button */
transition: all 0.2s ease;
}
.btn:hover {
opacity: 0.88;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(124, 111, 255, 0.45);
}
.btn:active {
transform: translateY(0);
}
/* Accessibility focus ring */
.btn:focus-visible {
outline: 2px solid #7c6fff;
outline-offset: 3px;
}
These are the six most common button patterns used across modern UI design systems. Each serves a different purpose in the visual hierarchy:
/* Solid — primary action, highest emphasis */
.btn-solid { background: #7c6fff; color: #fff; border: none; }
/* Outline — secondary action, medium emphasis */
.btn-outline { background: transparent; color: #7c6fff; border: 2px solid #7c6fff; }
.btn-outline:hover { background: #7c6fff; color: #fff; }
/* Ghost — tertiary action, minimal emphasis */
.btn-ghost { background: transparent; color: #7c6fff; border: none; }
.btn-ghost:hover { background: rgba(124, 111, 255, 0.1); }
/* Gradient — hero/promotional, high energy */
.btn-gradient { background: linear-gradient(135deg, #7c6fff, #ff6fb0); color: #fff; border: none; }
/* Soft — chip/filter style, background matches brand */
.btn-soft { background: rgba(124, 111, 255, 0.15); color: #7c6fff; border: none; }
.btn-soft:hover { background: rgba(124, 111, 255, 0.25); }
/* Glow — attention-grabbing, use sparingly */
.btn-glow { background: #7c6fff; color: #fff; border: none; }
.btn-glow:hover { box-shadow: 0 0 20px 4px rgba(124, 111, 255, 0.5); }
Consistent sizing across your design system prevents visual noise. Use a defined size scale and apply it uniformly:
| Size | Padding | Font size | Use case |
|---|---|---|---|
| XS | 6px 14px | 0.72rem | Compact toolbars, tags, inline actions |
| SM | 8px 18px | 0.82rem | Secondary actions, table rows, list items |
| MD | 11px 24px | 0.9rem | Standard CTAs, form submits, cards |
| LG | 14px 32px | 1rem | Hero sections, landing pages, primary CTAs |
Well-styled buttons must also be accessible. These rules are non-negotiable for production code:
/* Never remove outline entirely — use :focus-visible instead */
.btn:focus { outline: none; } /* BAD — keyboard users lose focus indicator */
.btn:focus-visible { /* GOOD — only shows for keyboard navigation */
outline: 2px solid #7c6fff;
outline-offset: 3px;
}
/* Disabled state */
.btn:disabled, .btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Minimum touch target size (WCAG 2.5.5) */
.btn { min-height: 44px; min-width: 44px; }
All CSS properties used by these button styles have universal browser support. No vendor prefixes required.
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| CSS transitions | 26+ | 16+ | 7+ | 12+ |
| border-radius | 4+ | 4+ | 5+ | 12+ |
| box-shadow | 10+ | 4+ | 5.1+ | 12+ |
| CSS gradients | 26+ | 16+ | 7+ | 12+ |
| :focus-visible | 86+ | 85+ | 15.4+ | 86+ |
| display: inline-flex | 29+ | 28+ | 9+ | 12+ |
Use the CSS :hover pseudo-class and place the transition property on the base state — not the hover rule. This ensures the animation plays both when the mouse enters and when it leaves. Common hover effects are opacity: 0.88, transform: translateY(-2px) for a lift effect, increased box-shadow, and background-color changes.
Use <button> for actions on the current page: submitting a form, opening a modal, triggering JavaScript. Use <a href="..."> styled as a button for navigation to another URL or page. The distinction matters for screen readers (which announce "button" vs "link"), keyboard navigation (Enter activates links, Space or Enter activates buttons), and browser history behaviour.
Add width: 100% to the button. If the button uses display: inline-flex, also switch to display: flex for the full-width version. A utility class like .btn-block { display: flex; width: 100%; } applied alongside your base .btn class is a clean, composable approach.
At minimum: border: none; background: none; padding: 0; cursor: pointer; font: inherit;. The font: inherit part is often forgotten — by default buttons inherit the system font, not the document's font stack. Also set -webkit-appearance: none; appearance: none; for Safari to ensure no native styling bleeds through.
4–6px feels professional and conservative (enterprise, finance, developer tools). 8–12px is the modern standard for SaaS and consumer products. 999px gives a full pill — works well for filters, tags, and promotional CTAs. The most important thing is consistency — whatever value you choose, apply it across all buttons and interactive elements in your design system.
Add a CSS spinner using a ::after pseudo-element with a rotating border: set pointer-events: none and opacity: 0.7 on the button, hide the text, and show the spinner. Use an aria-busy="true" attribute and a visually hidden loading message for screen reader accessibility.
Use both. Padding drives the visual size and scales with font size. Set min-height: 44px and min-width: 44px separately to meet WCAG 2.5.5 touch target guidelines — small icon-only buttons with minimal padding need a minimum tap area even if the visual element is smaller. This is especially important on mobile.
Use negative margins or a flex container with gap: 0. Set border-radius: 0 on middle buttons, and only apply radius to the first-child and last-child: .group .btn:first-child { border-radius: 8px 0 0 8px; } .group .btn:last-child { border-radius: 0 8px 8px 0; }. Use border-right: none on all but the last to avoid double borders.
Buttons rarely exist in isolation. These tools on CSSTools.io help you build the complete component: