Every button style you need — solid, outlined, gradient, animated, 3D, neumorphic and neon. Click any example to copy the CSS instantly. No framework, no dependencies.
Every button on a page is a decision point — its style should tell the user how important that decision is before they even read the label. A page with five buttons that all look the same forces people to read every one; a page with a clear visual hierarchy lets them scan. The six categories below cover the situations you'll actually run into.
The default choice for a primary action — checkout, submit, sign up. High contrast, impossible to miss. Use at most one solid button per screen so it stays the obvious next step.
For secondary actions that sit next to a solid one — "Cancel," "Learn more," "Back." A 2px border with a transparent fill reads as present but not urgent, which is exactly the signal you want.
Common on SaaS marketing pages and pricing tiers, where a bit of visual energy on the CTA helps it stand out from an otherwise flat design. Keep the gradient subtle — two adjacent hues, not a rainbow — or it reads as dated rather than modern.
Hover and click micro-interactions (scale, fill-slide, pulse) add polish, but they cost attention. Reserve them for the one or two buttons per page you actually want someone to notice.
A raised, skeuomorphic look (drop shadow, slight lift on hover) suits playful or consumer-facing brands. It's a heavier visual statement, so it tends to fight with a minimal design system — use it deliberately, not by default.
Glow, neumorphic, and neon-outline styles work best on dark backgrounds for gaming, crypto, or creative-portfolio sites. On a light background or a conventional business site, they usually read as off-brand.
<button>), at least a 4.5:1 contrast ratio between text and background for accessibility, and a minimum ~44×44px tap target on mobile — a beautiful button nobody can tap accurately is a conversion bug, not a design choice.
Use the background-color property for solid buttons or background with a gradient value for gradient buttons. Pair with color for text and border for outlined styles. Example: .btn { background-color: #6366f1; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; }
Use the :hover pseudo-class and add transition for smooth animation. Example: .btn { background: #6366f1; transition: background 0.2s; } .btn:hover { background: #4f46e5; } For more advanced effects use transform: scale(1.05) or box-shadow changes on hover.
Use CSS @keyframes for looping animations or :hover with transition for interaction-triggered effects. For a slide-fill effect use a pseudo-element ::before with transform: scaleX(0) that scales to 1 on hover. For a pulse use @keyframes pulse with box-shadow changes.
Common values: 4–6px for subtle rounding (professional/enterprise feel), 8–12px for modern SaaS look, and 9999px for a pill/capsule button. Match the border-radius of your cards and inputs for a consistent design system.
Use background: transparent, border: 2px solid color, and color: color for the base state. On :hover set background to the border color and color to white. Add transition: all 0.25s for smoothness.