CSS Button Generator
Free CSS Button Generator

Create Beautiful Buttonsin Seconds

Design pixel-perfect CSS buttons with live preview. Tweak colors, borders, shadows, and hover effects — then copy the ready-to-use CSS with one click.

🎨

Live Preview

See every change reflected instantly — colors, borders, shadows, and hover animations update in real time.

✨

Hover & Active States

Fine-tune hover scale, color shifts, and transition speed to craft polished interactive button experiences.

📋

One-Click Copy

Get clean, production-ready CSS with a single click — no extra libraries or frameworks required.

Live Preview

Contrast: 3.7:1 — WCAG Fail

Light mode

Click Me

Dark mode

Click Me

Hover and click the button to preview interactive states

Generated CSS

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0px 4px 12px 0px rgba(59, 130, 246, 0.45);
  transition: all 200ms ease;
  text-decoration: none;
  outline: none;
}

.btn:hover {
  background: #1d64d8;
  box-shadow: 0px 4px 12px 0px rgba(59, 130, 246, 0.45);
}

.btn:active {
  transform: scale(0.97);
  box-shadow: 0px 4px 12px 0px rgba(59, 130, 246, 0.45);
}

.btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Preset Style

Button Label

Colors

Shape & Size

Border Radius8px
Padding X24px
Padding Y12px
Font Size16px

Border

Border Width0px

Box Shadow

Offset X0px
Offset Y4px
Blur12px
Spread0px

Hover Effect

Transition Duration200ms

Frequently Asked Questions

Everything you need to know about CSS Button Generator.