Back to all articles
UX/UIComponents

Buttons That Work: Why visitors do not click your CTA and how to fix it fast

Your CTA is right there but the click rate is flat. Buttons fail on contrast, copy, and size — here is the fix that lifts conversion without a redesign.

6 min read
Buttons That Work: Why visitors do not click your CTA and how to fix it fast

Buttons That Work: Why visitors do not click your CTA and how to fix it fast

You shipped your landing page. Traffic is coming in. The CTA is right there — and the click rate is flat.

The button is usually where founders bleed conversions without realizing it. It blends into the background, the copy is vague, or it's so small on mobile that thumbs miss it. Buttons aren't decoration; they're the moment a visitor decides to act. When they don't work, nothing else on the page matters.

What "a button that works" really means

A working button does one thing well: it screams "click me" before the visitor has to think about it. That's called affordance — the visual cue that tells the brain "this is pressable."

We use color, shadow, shape, and placement to send that signal. Skip those and visitors hesitate. Hesitation is the gap where conversions die.

"Buttons should look like buttons." — Luke Wroblewski

The more you push toward "minimal" or "flat" without those signals, the more friction you add. Visitors stop and ask "is this a button or just a colored box?" — and that pause is enough to lose them.

Why button quality moves your numbers

A single button can be the difference between a checkout and a bounced session.

  1. Wayfinding. Good buttons act as signposts. Visitors don't pogo back and forth trying to figure out the path.
  2. Conversion. Tiny tweaks — better contrast, better copy — routinely shift conversion by double digits.
  3. Accessibility. Buttons that meet contrast and size standards work for visitors with vision or motor constraints. That's more conversions, not just compliance.
  4. Trust. Polished, consistent buttons make the page feel safe. Broken or weirdly-styled ones make visitors nervous about typing in a credit card.

Is your button design working?

Get an instant AI review of your page against 80+ conversion principles.

Scan Your Site Free

How to build buttons that drive action

Three things to nail. Get them right and you're already ahead of most landing pages.

1. Make it impossible to miss

If the button doesn't stand out from the page, it doesn't exist. Your CTA needs to fight for attention, not blend in.

  • Do this: Pick a fill color that contrasts hard with the background. If your page is mostly blue and white, a vivid orange or green button pops.
  • Don't: Use ghost buttons (outline only) for the primary action. Studies — and your own analytics if you A/B test — show solid fills win.

2. Write copy like you're giving a directive

The label is the hook. Short, specific, action-led. Three words or fewer when possible. Use imperative verbs that name the outcome.

  • Do this: "Get my free report," "Start free trial," "Create my account."
  • Don't: "Submit," "Click here," "Next." None of those tell visitors what they're about to get.

3. Make it big enough to hit

Fitts's Law in plain English: the bigger and closer a target, the faster it gets hit. On phones — where most landing page traffic lives — that means thumb-friendly.

  • Mobile: 48x48 dp minimum. Thumbs aren't precise.
  • Desktop: 32–40px tall is the floor.
  • Spacing: Don't crowd buttons. Tap-target overlap kills mobile conversion.

A diagram showing proper button spacing and touch target sizes

Common ways builders break this

No visual hierarchy

  • The mistake: Every button looks the same — primary, secondary, destructive. Visitors can't tell which is the goal.
  • The fix: One solid primary per screen. Outlined or text styles for everything else.

No state feedback

  • The mistake: The button doesn't react on hover, click, or focus. Visitors wonder if the page is broken.
  • The fix: Distinct hover, active, focus, and disabled states. Even a small color shift is enough.

Tiny labels

  • The mistake: 10px text inside a big button.
  • The fix: 14–16px minimum, centered. The button can be big without the text being small.

How real products do this

Spotify

Spotify case study showing high contrast buttons

Spotify owns "the green button." Vibrant, pill-shaped, high contrast against dark backgrounds, anchored where thumbs land on mobile. You can't miss the play or upgrade button. That's the point.

Stripe

Stripe case study showing consistent button design

Stripe is obsessed with consistency. Their blue means "action" everywhere — dashboard, docs, marketing site. Once a visitor learns it, every new page feels familiar. That's not magic, it's discipline.

See how your site compares

Our AI checks your page against the same patterns used by Spotify and Stripe.

Get Your Free UX Score

Buttons don't live alone. These shape how yours land:

Resources & further reading

Material Design: Buttons

Google's official documentation on button types, states, and placement.

Apple Developer Documentation: Buttons

The Human Interface Guidelines for creating buttons within the Apple ecosystem.

Buttons in UI Design

A deep dive article by Willian Matiola on the evolution of button styles.

Frequently asked questions

Don't Guess Your UX. Scan It.

Upload your screens or paste your URL to get a senior-level page review in under 3 minutes.

Start Free Scan

Related Articles