CSS Button Styles: 10 Examples with Copy-Paste Code (2026)

Buttons are the most clicked element on any website. Getting them right makes a real difference to user experience. Here are 10 CSS button styles with live previews and copy-paste code you can drop into any project today — no frameworks needed.

Want to customize these? Use the CSS Button Generator to adjust colors, size, radius and shadow with a live preview.

1. Solid Button

The most common button style. A filled background with contrasting text. Simple, clear, and works everywhere.

.btn-solid {
  background: #4f46e5;
  color: #ffffff;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-solid:hover {
  background: #4338ca;
  transform: translateY(-1px);
}

2. Outline Button

Transparent background with a colored border. Great as a secondary action alongside a solid primary button.

.btn-outline {
  background: transparent;
  color: #4f46e5;
  border: 2px solid #4f46e5;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  background: #4f46e5;
  color: #ffffff;
}

3. Gradient Button

Two-color gradient backgrounds add depth and visual interest. Popular in SaaS landing pages and CTAs.

.btn-gradient {
  background: linear-gradient(135deg, #4f46e5, #a855f7);
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-gradient:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

4. Ghost Button

No background, no border — just text with a hover effect. Used for low-priority actions or in dark hero sections.

.btn-ghost {
  background: transparent;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}

5. Pill Button

Fully rounded corners. Friendly, modern look. Common in tags, filters, and mobile UIs.

.btn-pill {
  background: #4f46e5;
  color: #ffffff;
  border: none;
  padding: 10px 28px;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

6. 3D / Raised Button

A bottom border creates a 3D raised effect. The button "presses" on click using transform. Satisfying tactile feel.

.btn-3d {
  background: #4f46e5;
  color: #ffffff;
  border: none;
  border-bottom: 4px solid #3730a3;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s ease;
}
.btn-3d:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

7. Neon / Glow Button

A colored box-shadow creates a glow effect. Popular in dark-mode UIs, gaming sites, and tech products.

.btn-neon {
  background: #4f46e5;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(79,70,229,0.6), 0 0 40px rgba(79,70,229,0.3);
  transition: box-shadow 0.2s;
}
.btn-neon:hover {
  box-shadow: 0 0 30px rgba(79,70,229,0.8), 0 0 60px rgba(79,70,229,0.4);
}

8. Glass / Frosted Button

Semi-transparent background with backdrop blur. Works on top of images or gradient backgrounds.

.btn-glass {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.25);
}

9. Loading State Button

A button that shows a spinner while an action is processing. Essential for form submissions and async operations.

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

10. Icon + Text Button

Combining an icon with text improves scannability and communicates action type at a glance.

.btn-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #4f46e5;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

When to Use Each Style

Style	Best For
Solid	Primary CTAs, form submissions
Outline	Secondary actions, cancel buttons
Gradient	Hero CTAs, upgrade prompts
Ghost	Tertiary actions, dark backgrounds
Pill	Tags, filters, social actions
3D	Games, interactive tools
Neon	Dark-mode UIs, tech/gaming products
Glass	Overlay on images or gradients
Loading	Any async action (forms, API calls)
Icon + Text	Action buttons where type needs clarity

Accessibility Checklist

Use <button> not <div> — native buttons are keyboard-focusable by default
Minimum touch target: 44x44px — WCAG 2.5.5 guideline for mobile
Color contrast ratio: 4.5:1 minimum — use a contrast checker for text on button backgrounds
Visible focus state — never remove outline without replacing it with a custom focus style
Loading state — add aria-busy="true" and aria-label="Loading" when showing a spinner

Build your own: Use the CSS Button Generator to customize any of these styles with a live preview and copy the exact CSS for your project.

CSS Button Styles: 10 Examples with Copy-Paste Code

1. Solid Button

2. Outline Button

3. Gradient Button

4. Ghost Button

5. Pill Button

6. 3D / Raised Button

7. Neon / Glow Button

8. Glass / Frosted Button

9. Loading State Button

10. Icon + Text Button

When to Use Each Style

Accessibility Checklist

Related Articles