The Button Reset
Before styling, reset the browser defaults that vary across browsers. Every button in this guide starts with this foundation:
.btn {
/* Reset */
appearance: none;
-webkit-appearance: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1;
/* Behaviour */
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
The key parts: font-family: inherit prevents buttons from defaulting to the system font. display: inline-flex with align-items: center handles icon + text alignment. white-space: nowrap prevents button labels from wrapping unexpectedly.
Solid Button
The primary CTA. Highest visual weight, used sparingly — one per view or section.
.btn-solid {
background: #7c6fff;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 14px rgba(124, 111, 255, 0.35);
transition: all 0.2s ease;
}
.btn-solid:hover {
opacity: 0.88;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(124, 111, 255, 0.45);
}
.btn-solid:active {
transform: translateY(0);
}
Outline Button
Secondary actions. Same visual weight as the surrounding UI — uses colour only for the border and text until hovered.
.btn-outline {
background: transparent;
color: #7c6fff;
border: 2px solid #7c6fff;
padding: 10px 24px;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.btn-outline:hover {
background: #7c6fff;
color: #fff;
}
Ghost Button
Tertiary actions. No border, just colour and opacity on hover. Used in toolbars, menus, and dense UIs where visual weight needs to be minimal.
.btn-ghost {
background: transparent;
color: #7c6fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.btn-ghost:hover {
background: rgba(124, 111, 255, 0.1);
}
Gradient Button
High-energy promotional buttons. Great for hero sections and landing pages where you want maximum visual impact. Use sparingly — one per page is the rule.
.btn-gradient {
background: linear-gradient(135deg, #7c6fff, #ff6fb0);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.btn-gradient:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(124, 111, 255, 0.4);
}
Glow Effect Button
A solid button that emits a coloured glow on hover. Used for attention-grabbing CTAs, gaming UIs, and dark-themed products.
.btn-glow {
background: #7c6fff;
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.btn-glow:hover {
box-shadow: 0 0 20px 4px rgba(124, 111, 255, 0.55);
transform: translateY(-1px);
}
Button Sizing Scale
Use a consistent size scale across all buttons in your project. Mixing arbitrary padding values creates visual inconsistency that users notice even if they cannot name it.
| Size | Padding | Font size | Use case |
|---|---|---|---|
| XS | 6px 14px | 0.72rem / 11.5px | Compact toolbars, table row actions, tags |
| SM | 8px 18px | 0.82rem / 13px | Secondary actions, list items, card actions |
| MD (default) | 10px 24px | 0.9rem / 14.5px | Standard CTAs, forms, navigation |
| LG | 14px 32px | 1rem / 16px | Hero sections, landing pages, primary CTAs |
Accessibility: Focus & Disabled States
A button that looks good but fails keyboard navigation or has invisible focus state is unusable for a significant portion of your users. These states are non-negotiable in production code:
/* Focus ring — visible for keyboard users, hidden for mouse */
.btn:focus { outline: none; }
.btn:focus-visible {
outline: 2px solid #7c6fff;
outline-offset: 3px;
}
/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
transform: none !important;
box-shadow: none !important;
}
/* Minimum touch target size (WCAG 2.5.5) */
.btn {
min-height: 44px;
min-width: 44px;
}
Setting .btn:focus {{ outline: none }} without providing a :focus-visible alternative removes the focus indicator for keyboard users. Use :focus-visible to show the ring only for keyboard/assistive technology navigation while keeping the mouse experience clean.
How to Design Any Button Style with CSSTools.io
The CSSTools.io Button Generator covers all six styles from this article — solid, outline, ghost, gradient, soft, and glow — with live hover state preview so you can judge the interaction before copying the code.
Open the Button Generator and select Solid, Outline, Ghost, Gradient, Soft, or Glow. The preview updates instantly with both the normal state and hover state side by side.
Click the background colour swatch and pick your brand colour using the colour picker, or type a hex value directly. The hover state derives from your colour automatically — you do not need to calculate a darker shade by hand.
Use the size selector (XS/SM/MD/LG) and border-radius slider to match your design system. The live preview shows your actual button text at the right size so you can judge proportions accurately.
Both the normal and hover states are shown simultaneously — you do not need to hover to see the effect. This lets you evaluate the transition effect clearly before committing to it.
Switch between the CSS and HTML tabs. The CSS tab gives you complete .btn and .btn:hover rules. The HTML tab gives you the markup to paste alongside it. Add the focus-visible and disabled states from this article to complete the production-ready component.
Design any button style in seconds
Six styles, live hover preview, colour picker. Copy both CSS and HTML instantly.
Open Button Generator →