CTA Button Color Is a Distraction. These 5 Variables Actually Drive Clicks.

By Jonathan · Founder, PageGains

Every few months, someone publishes a case study claiming a red button outperformed a green one by 34%, and the whole industry loses its mind for a week. Meanwhile, the actual reasons visitors don't click — vague labels, wrong placement, competing actions — go completely unfixed. Here's what the evidence actually says about what moves CTA performance, and what you can stop arguing about.

Button Color: Worth Maybe 10 Minutes of Your Time

The red-vs-green debate has been running since 2007 and it's produced exactly one reliable finding: contrast matters, color doesn't. A button that visually pops off the page — whatever color that requires — will outperform one that blends into the background. That's it. That's the whole insight.

HubSpot's widely cited "red beats green" test worked because the red button had higher contrast on that particular page, not because red is neurologically more compelling. Run the same test on a page with a red background and you'll get the opposite result.

What to actually do: open your page, squint until it blurs, and check whether your CTA button is the most visually dominant element in the viewport. If you have to search for it, fix the contrast. Then move on. This decision should take less time than it takes to read a Medium post about it.

Button Label: The Highest-Leverage Change You're Probably Not Making

This is where tests consistently produce double-digit lift, and most pages still get it wrong. Generic labels — "Submit," "Get started," "Learn more" — convert worse because they describe an action rather than an outcome.

The rule is simple: the button label should complete the sentence "I want to ___." Not "I want to click a button." Not "I want to submit a form." The actual thing the visitor wants.

"Start my free trial" → "Start building for free — no credit card"
"Download" → "Get the 47-page audit checklist"
"Contact us" → "Talk to a strategist today"

Each of those rewrites takes 90 seconds. Each one has been A/B tested to meaningful lift across multiple industries. The specificity signals that something real is on the other side of the click — and that the page understands what the visitor actually came for. If your label could appear on any button, on any website, in any industry, it's too generic.

CTA Placement: Your Page Is Probably Hiding the Button

The conventional wisdom is "above the fold," and it's correct — but incomplete. Above the fold matters most on high-intent pages where the visitor already knows what they want (paid traffic, retargeting, direct navigation). On pages where visitors are still deciding, the CTA needs to appear multiple times, anchored to the moments when desire peaks.

Desire peaks after a benefit statement, after social proof, and after you've answered the visitor's most likely objection. Those are your CTA trigger points. Put the button there, not just at the top and bottom out of habit.

A practical audit: scroll your page and mark every place where a visitor might think "okay, I'm convinced." Is there a CTA within one scroll-length of each of those moments? If they have to hunt upward or downward to find where to click, you've lost them. Attention evaporates fast and it doesn't come back.

Surrounding Copy: The Button Can't Carry the Whole Page

A CTA button surrounded by weak copy is like a great closer on a sales team that never gets a warm lead. It doesn't matter how good the button is — if the text around it hasn't built the case, the click won't happen.

This is the most overlooked variable in CTA optimization. Teams spend weeks A/B testing button text while leaving the paragraph directly above it completely untouched. That paragraph is doing the heavy lifting. It's either reinforcing the decision to click or quietly introducing doubt.

The sentence immediately above your CTA should do one of two things: restate the primary benefit in one line, or remove the last remaining objection. "No contracts, cancel any time" before a subscription CTA. "Free shipping on your first order" before an e-commerce add-to-cart. "Your data stays yours — always" before a SaaS signup form. These micro-reassurances have produced 15–25% lift in controlled tests. The button didn't change. The context around it did.

Button Size and White Space: Bigger Isn't Always Better, But Cramped Always Loses

There's a threshold below which a button is too small to register as clickable, and above which it starts to feel aggressive and cheap. Most B2B pages are below the threshold; most direct-response pages are above it.

The more important variable is white space. A button surrounded by competing elements — other links, adjacent copy, nearby images — loses click share to visual noise. The visitor's eye doesn't know where to go, so it goes nowhere.

Practical rule: your primary CTA should have at least 40px of clear space on all sides. Remove any secondary links or navigation elements within that zone. If you have a secondary CTA (e.g., "Learn more" next to "Start free trial"), make the hierarchy obvious through size, color, and weight — not just label text. Tests across SaaS landing pages consistently show that adding a ghost/outline style to secondary CTAs, rather than a second filled button, reduces cannibalization of the primary action.

The Number of CTAs on the Page: Fewer Choices, More Clicks

Hick's Law isn't new, but pages keep violating it. When you give visitors multiple equal-weight choices — three different offer buttons, five navigation links in the hero, a chat widget competing with the primary CTA — you introduce decision friction. Decision friction kills conversions.

The research from the famous jam study (Iyengar & Lepper, 2000) showed that a display of 24 jams produced 1/10th the purchase rate of a display of 6. The same dynamic plays out on landing pages. More options feel like value; they perform like paralysis.

Pick one primary CTA per page section. If you genuinely need to offer two paths (e.g., "Start free trial" vs. "Book a demo"), visually subordinate one of them. The page should always have a clear answer to "what do I do next?" — and that answer should be obvious without reading the whole page. If you can't identify the single intended next action for a visitor, neither can they.

Mobile Behavior: Your Desktop CTA Strategy Doesn't Transfer

Mobile traffic makes up 60–70% of sessions on most B2B and e-commerce pages, and CTA design for mobile follows different rules. Thumb reach zones mean the bottom-center of the screen is more accessible than the top-right corner where desktop calls to action often live. Sticky CTAs — bars that follow the user as they scroll — routinely outperform static placements on mobile by 20–40% in tests I've seen across lead gen and SaaS clients.

Beyond placement, mobile visitors have shorter attention spans and lower tolerance for friction. A CTA that asks for five fields on desktop should ask for one on mobile (usually just email), with the rest collected post-click. Every additional field at the mobile CTA stage reduces conversion. Not slightly — significantly. Going from one field to three in a mobile CTA form consistently drops completion rates by 30–50%.

Check your CTA experience on actual devices, not just a browser resized to mobile dimensions. The tap target size, the keyboard behavior, the scroll behavior after tap — none of these show up in a desktop simulation.

Urgency and Scarcity: The Difference Between Real and Performative

Urgency works when it's true. "Offer ends Friday" converts when there's a real deadline, and it's meaningless — often actively harmful — when the countdown timer resets every time someone visits. Visitors are smarter than most marketers give them credit for. They open the page in incognito, they see the same "only 3 left!" message on their third visit, and they stop trusting everything else on the page.

Real urgency is powerful: enrollment closes, cohort is full, price increases on a set date, inventory is genuinely limited. Fake urgency is corrosive: it provides a short-term click bump followed by long-term brand erosion and higher refund rates.

If you have a real reason to act now, say it plainly and specifically. "Pricing increases from $49 to $79 on April 1st — we're not bringing it back" outperforms a ticking clock graphic with no explanation. Context beats theater.

The Bottom Line

The CTA button debate has persisted because color and size are easy to argue about and easy to test. They're also, almost always, not the problem. The pages that consistently underperform have weak labels, buried placement, cluttered surroundings, and no mobile strategy — not the wrong shade of blue.

Fix the label first. Make it specific, outcome-focused, and written for the person who's about to click it. Then audit placement — every major benefit section should have a CTA within reach. Then strip the noise from around the button and make the paragraph above it do real work.

The teams who win at CTA optimization aren't running more tests than everyone else. They're running tests on the right variables. Color is probably not one of them.