30 Modern Button Styles That Convert (And How to Build Each One)

A button that converts does three jobs at once: it looks obviously clickable, it tells you exactly what happens next, and it fits the brand around it. Everything else, the gradients, the glass, the 3D, is seasoning on top of those three.

This guide covers the rules that actually move conversions, then walks through 30 modern button styles with a concrete recipe for each, so you can rebuild any of them in Figma or CSS in minutes.

Why does the button deserve this much attention?

The button is the last moment between intent and action. A visitor can love your whole page and still stall at a button that looks ambiguous, disabled, or untrustworthy. Apple and Google both publish detailed guidance for this one element because it's where decisions happen.

Every button answers four silent questions before conscious thought kicks in: Is this clickable? What happens when I click? Can I trust it? Does this look professional? Your design answers them whether you meant it to or not.

The five rules that outrank any style

1. Size for thumbs, not cursors. WCAG 2.2 sets a 24 by 24 CSS pixel floor for touch targets at level AA, but treat that as the legal minimum. Apple's Human Interface Guidelines recommend 44 points and Google's Material Design recommends 48dp. Design to 44 to 48 and you satisfy everyone.
2. Hit the contrast numbers. WCAG asks for 4.5:1 contrast on button text and 3:1 on the parts of the component you need to perceive, like its boundary against the background. Then go beyond compliance: squint at the screen. If the button disappears, it fails.
3. Write action words. "Submit" is weak. "Get the free guide" is strong. The label should finish the sentence "I want to...".
4. Match the context. A fintech product earns trust with calm, conservative buttons. A game can go loud. Style is a promise about what's behind the click.
5. Design every state. Hover, focus, active, loading, disabled, error. The loading state matters most: a button that goes silent after a click reads as broken, and users click again or leave.

What should you never do?

• Don't make users guess. No mystery labels, no "Click here".
• Don't fight platform conventions. iOS, Android, and web users each arrive with muscle memory. Spend your creativity elsewhere.
• Don't run more than three button styles. Primary dominates, secondary steps back, tertiary whispers. A fourth style just adds noise.
• Don't ship decoration that costs performance. Prefer CSS and SVG over image-based buttons; they stay sharp at any size and weigh almost nothing.
• Don't rely on color alone. Color-blind users need shape, label, or icon cues too. Accessible buttons convert better for everyone.

30 modern button styles, with recipes

Six families, five styles each. Every recipe below can be built with plain CSS or Figma effects, no plugins needed. Treat them as starting points and swap in your brand colors.

Soft depth (the friendly family)

1. Soft shadow: solid fill, 8 to 12px radius, one blurry drop shadow in the fill color at 30 percent opacity. The default "nice" button of the 2020s.
2. Elevated hover: same as above, but the shadow grows and the button lifts 1 to 2px on hover. Cheap to build, satisfying to use.
3. Clay: big radius (16px plus), pastel fill, one inner shadow light from the top, one dark from the bottom. Reads as squishy and tactile.
4. Neumorphic: fill matches the page background, with a light shadow up-left and a dark shadow down-right. Looks pressed from the surface. Watch contrast: this family fails accessibility fastest.
5. Gradient glow: two-stop gradient fill with a blurred shadow in the gradient's end color. The glow sells the premium feel.

Flat and sharp (the confident family)

1. Plain solid: one brand color, 4 to 8px radius, bold label. Boring and extremely effective. Most tested winner in B2B.
2. Square-edged: zero radius, solid fill. Signals editorial or luxury depending on type choice.
3. Pill: fully rounded ends. Friendly and mobile-native; works best for short labels.
4. Ghost: transparent fill, 1 to 2px border, text in the border color. The classic secondary button.
5. Text-plus-arrow: no container at all, just a bold label and an arrow that nudges right on hover. The quietest tertiary action.

Brutalist (the loud family)

1. Hard offset shadow: solid fill, 2px black border, solid black shadow offset 4px down-right, no blur. On click, the button moves into the shadow. Pure dopamine.
2. Border-only brutalist: thick 3px border, no fill, mono or grotesque typeface in all caps.
3. Clashing duo: high-saturation fill with a deliberately clashing border or shadow color. For brands that want to be disliked by the right people.
4. Sticker: white fill, black border, slight rotation (2 to 3 degrees). Looks slapped onto the page.
5. Marquee hover: label scrolls horizontally on hover inside a hard-edged container. Use once per page, maximum.

Glass and blur (the premium family)

1. Classic glass: white fill at 10 to 20 percent opacity, 1px white border at 30 percent, background blur of 10 to 20px. Needs a colorful backdrop to read as glass.
2. Frosted dark: same recipe on dark UI with a near-black translucent fill. The streaming-app look.
3. Glass with glow edge: add a subtle gradient border, light at top, transparent at bottom, to fake a catch-light.
4. Aurora glass: glass button sitting on an animated gradient blob. The button stays still; the background does the work.
5. Inset glass: inner shadow instead of drop shadow, so the button looks carved into the panel.

3D and tactile (the playful family)

1. Pushable: solid fill sitting on a darker base layer 4 to 6px tall; on click the top layer drops flush. Feels mechanical, like a keyboard key.
2. Beveled retro: light top edge, dark bottom edge, subtle vertical gradient. The 2004 look, back on purpose.
3. Isometric: the pushable button drawn at an angle with two visible sides. Strong in illustration-heavy brands.
4. Chunky underline: flat top, thick single-color bottom border acting as the "depth". Compresses on click by swapping border for transform.
5. Embossed metal: gray gradient fill, hairline light border top, dark border bottom. Sparingly, for dashboard or pro-tool aesthetics.

Animated accents (the attention family)

1. Shine sweep: a diagonal white gradient strip sweeps across the fill on hover. One second, once, not looping.
2. Border draw: the border animates around the perimeter on hover. Elegant on ghost buttons.
3. Fill wipe: background color slides in from the left on hover, label flips contrast. A microinteraction classic; more of those in our post on micro-interactions.
4. Icon nudge: arrow or icon shifts 4px on hover while the container stays put. Minimal motion, maximum affordance.
5. Pulse ring: a soft ring expands outward once every few seconds. Reserve it for the single most important action on the page, and respect reduced-motion settings.

How do you choose from 30 options?

Don't pick by taste, pick by hierarchy and context. One family per product. Your primary button gets the most expressive treatment, your secondary a quieter sibling from the same family, your tertiary almost nothing. Then A/B test the label and color before you ever test the style: in our experience the words on the button move results more than the decoration around them.

And wherever the button lives on a landing page matters as much as how it looks. We covered that in effective call to action placement.

FAQ

What's the minimum size for a button?

WCAG 2.2 level AA requires a 24 by 24 CSS pixel target, but aim for 44 to 48: that's what Apple's and Google's guidelines recommend, and thumbs will thank you.

Should buttons be SVG, CSS, or images?

CSS for the button itself, SVG for any icons inside it. Both scale cleanly and cost almost nothing to load. Image-based buttons blur on retina screens and can't adapt to translations.

How many button styles should one site use?

Three: primary, secondary, tertiary. If you're tempted by a fourth, what you actually need is a clearer page hierarchy, not another button.