CSS Button Generator

You’re building a landing page and need a call-to-action button that matches your brand colors, has a subtle shadow, rounded corners, and a smooth hover transition. Writing all the CSS properties from scratch — background, border, padding, border-radius, box-shadow, hover state, active state, transition — takes time. This generator lets you configure everything visually and copy the finished CSS.

Why This Tool

Button styling involves 15+ CSS properties across normal, hover, active, and focus states. Getting consistent padding, readable contrast, and smooth transitions requires iteration. This tool shows a live preview as you adjust each property, generates clean CSS including hover and active states, and lets you copy it in one click. No signup, no server — everything runs in your browser.

Key CSS Properties for Buttons

Colors and Background

• background-color: The fill color. Use solid colors or gradients.
• color: Text color. Ensure sufficient contrast (WCAG 4.5:1 minimum for normal text).
• border: Width, style, and color. Set to none for flat buttons.

Shape and Spacing

• border-radius: Corner rounding. 4px for subtle, 8px for modern, 9999px for pill shape.
• padding: Internal spacing. Typical: 12px 24px (vertical horizontal).

Effects

• box-shadow: Depth and elevation. 0 2px 4px rgba(0,0,0,0.1) for subtle lift.
• transition: Smooth property changes on hover. all 0.2s ease is a safe default.

States

.btn { background: #2563EB; color: white; transition: all 0.2s ease; }
.btn:hover { background: #1D4ED8; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn:active { background: #1E40AF; transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #60A5FA; outline-offset: 2px; }

Button Design Best Practices

1. Size: Minimum 44×44px touch target (WCAG 2.5.5). Desktop minimum: 36px height.
2. Contrast: Text must have 4.5:1 contrast ratio against the button background.
3. Hierarchy: Primary (filled, brand color), secondary (outlined or muted), tertiary (text-only).
4. Feedback: Hover, active, and focus states must be visually distinct.
5. Consistency: Use the same border-radius, padding ratios, and font across all buttons.

Common Button Styles

Solid (Primary):

.btn-primary {
  background: #2563EB; color: #fff; border: none;
  padding: 12px 24px; border-radius: 8px; font-weight: 600;
}

Outlined (Secondary):

.btn-outlined {
  background: transparent; color: #2563EB;
  border: 2px solid #2563EB; padding: 10px 22px; border-radius: 8px;
}

Ghost (Tertiary):

.btn-ghost {
  background: transparent; color: #2563EB;
  border: none; padding: 12px 24px;
}
.btn-ghost:hover { background: rgba(37,99,235,0.08); }

Pill:

.btn-pill { border-radius: 9999px; padding: 12px 32px; }

Frequently Asked Questions

How do I make a button accessible? Use a <button> element (not a <div>), ensure 4.5:1 color contrast, add a visible focus indicator with :focus-visible, and make the button at least 44×44px for touch targets.

What border-radius makes a pill button? Set border-radius: 9999px (or any very large value). The browser clamps it to half the element’s height, creating a perfect pill shape regardless of button size.

How do I add a hover effect without JavaScript? Use the CSS :hover pseudo-class. Common effects include changing background-color, adding box-shadow, or applying a subtle transform: translateY(-1px) for a lift effect. Add transition for smooth animation.

Can I use gradients for button backgrounds? Yes. Use background: linear-gradient(135deg, #667eea, #764ba2) for a gradient fill. On hover, you can shift the gradient position or change to a slightly different gradient for visual feedback.

Does this tool generate production-ready CSS? Yes. The output includes properly formatted CSS with hover, active, and focus states. Copy it directly into your stylesheet or component.