The Two-Button Homepage: How to Design a Secondary CTA That Converts Without Cannibalizing Your Primary

Adding a second button to your homepage hero sounds harmless -- but one documented A/B test found that a "Learn More" secondary CTA increased total clicks by 34% while dropping target conversions by 12%. The difference between a secondary CTA that expands your funnel and one that quietly destroys it comes down to a set of principles most teams skip entirely.

This article breaks down those principles with data, case studies from Slack, HubSpot, and Courier Exchange, and a decision framework you can apply before your next homepage change.

Computer screen displaying a website homepage with navigation and content layout Photo by Carlos Muza on Unsplash

Why Your Homepage Needs Two Conversion Paths (But Only One Winner)

Modern homepages serve visitors who arrive at fundamentally different stages of purchase readiness. Some visitors know exactly what they want and are ready to commit immediately. Others need validation, context, or a lower-commitment step before they will act. The question is not whether both visitor types exist -- they do -- but whether your homepage is equipped to serve them without creating confusion.

This is exactly the pattern that Slack, HubSpot, and Notion have adopted. Each uses a two-button hero pairing a transactional primary CTA ("Get started free") with a softer secondary CTA ("Talk to sales" or "See a demo") to capture both ends of the purchase-readiness spectrum. The secondary CTA is not a hedge. It is a deliberate conversion path aimed at a different audience segment.

But here is where teams go wrong: the visual hierarchy between primary and secondary CTAs must be unmistakable. The moment both buttons look equally prominent, the secondary CTA begins working against you. A BMG360 A/B test demonstrated this precisely. Adding a "Learn More" button alongside a primary CTA increased total button clicks by 34% -- a number that looks great in a report. But application conversions dropped by 12%, and the application conversion rate declined by 10%. The secondary CTA was not visually subordinated, and it cannibalized the action that actually mattered.

The core psychological risk at play is what GetUplift identifies as Choice Overload -- the Paradox of Choice applied to your homepage. Two equally prominent options cause decision paralysis, leading visitors to delay action or abandon the page entirely. The fear of missing out on user segments drives teams to add more CTAs, but fewer, strategically-positioned CTAs outperform competing options almost every time. The solution is not removing the second button. It is making the hierarchy between the two buttons so visually clear that the visitor's brain processes it as "one primary action with an available alternative" rather than "two competing actions."

The Anatomy of a Properly Subordinated Secondary CTA

If the hierarchy between your two buttons is the single factor that determines whether a secondary CTA helps or hurts, then the styling and copy of those buttons deserve more deliberate attention than most teams give them.

Gary Simon at DesignCourse identifies visual differentiation as the most critical rule in primary vs. secondary CTA design. The primary CTA should always use a filled, high-contrast button in your brand color. It should carry visual weight -- a solid background, adequate padding, and prominent placement. The secondary CTA should use a ghost or outline style: a bordered button with a transparent or very light background that signals availability without competing for the visitor's eye. Styling both buttons identically destroys hierarchy, and destroying hierarchy destroys conversion.

Wireframe and UX design sketching on paper Photo by UX Store on Unsplash

The data supports this approach. SEEK's comparative research on button styles found that solid filled buttons achieved a 14% conversion rate while ghost buttons on the same layout achieved 13.1%. A separate ghost button A/B test reached statistical significance with a 20% decrease in clicks on ghost variants compared to solid variants. Ghost buttons are statistically viable as secondary CTAs -- but they must never replace a filled primary button. The conversion gap is real and measurable, which is exactly what makes a ghost button the right format for a deliberately de-emphasized secondary action.

Copy consistency matters just as much as visual styling. NerdCow, a CRO and UX agency, explicitly cautions that "Sign up" and "Get started" may seem synonymous but confuse visitors when used interchangeably on the same page. If your primary CTA says "Start free trial" and your footer CTA says "Sign up now" and your mid-page CTA says "Get started," you have introduced ambiguity that undermines the hierarchy you built with your button styles. Consistent labeling across the page is a conversion requirement, not a stylistic preference.

The Five-Level CTA Hierarchy

Understanding where your secondary CTA fits within the broader page structure requires a framework. NerdCow defines a five-level CTA hierarchy that applies to most homepage layouts:

In-text links -- the lightest-weight conversion path, embedded in body copy
Primary CTAs -- filled, high-contrast buttons that carry the page's central action
Secondary CTAs -- ghost or outlined buttons that offer an alternative for visitors who need a different path
Tertiary CTAs -- smaller, subdued links or buttons for supplementary actions (pricing, documentation, support)
Scroll-to buttons -- directional indicators that move visitors deeper into the page without committing to an action

Each level must maintain visible differentiation from the levels above and below it. A secondary CTA that looks identical to a primary CTA fails. A secondary CTA that looks identical to a tertiary link also fails -- because it signals too little importance and gets ignored by the visitors it was designed to serve.

VWO Blog's Smriti Chawla reinforces this with a practical rule: secondary offers should be less noticeable than the primary, with lighter color and no shadow as the baseline styling requirement. If you can look at your hero section and immediately tell which button is primary and which is secondary without reading the text, your hierarchy is working.

Where to Place a Secondary CTA: The Psychological Sequence Map

Getting the button style right is only half of the equation. Where you place the secondary CTA on the page determines whether it reaches the visitors who need it.

LandingPageFlow's 2026 CTA placement guide frames CTA placement around the visitor's psychological sequence: orientation, evaluation, commitment. The hero section handles orientation -- the visitor arrives, scans the headline, and decides whether to stay. The mid-page sections handle evaluation -- the visitor reads benefits, reviews testimonials, and assesses fit. The end-of-page handles commitment -- the visitor has consumed the full story and is ready to act or leave.

The secondary CTA belongs at the evaluation stage. Placed after benefits sections, testimonials, or case study summaries, it reaches visitors who have consumed enough information to want a smaller commitment before the final one. A "See a demo" button placed after three customer testimonials is serving a fundamentally different visitor than the same button placed in the hero. After the testimonials, the visitor has context. In the hero, they are still orienting.

Laptop showing analytics and performance data on screen representing the user scroll journey Photo by Luke Chesser on Unsplash

Five strategic CTA placements have emerged as the 2025-2026 homepage standard:

Hero section -- for immediate conversion of high-intent visitors
Mid-page after benefits -- for re-engagement of visitors who scrolled past the hero but are warming up
Post-testimonials -- to leverage the trust just built by social proof
End-of-page -- for visitors who consumed the full story and need one final nudge
Sticky/floating bar -- for mobile continuity, keeping the primary action visible during scroll

The shift in scroll behavior makes mid-page placements more valuable than ever. CXL's research on above-the-fold attention shows that visitors spent 80% of their viewing time above the fold in 2010, dropping to 57% in 2018, with estimates suggesting roughly 40% above-the-fold attention by 2025. That means secondary CTAs placed mid-page and below are reaching a meaningfully engaged audience -- visitors who have already invested time scrolling and are more receptive to a lower-commitment action.

Secondary CTAs for Service Businesses: The Lower-Commitment Path

For service businesses specifically, the secondary CTA functions as a trust-building bridge. Pie Heart Studio's Beth describes it as a lower-commitment option for visitors who need more time or context before they are ready to work with you. A "Book a discovery call" primary CTA paired with a "Join our mailing list for design inspiration" secondary CTA keeps potential clients engaged without requiring the full commitment of a paid consultation.

This is especially important for service businesses with long sales cycles. A visitor who is not ready to book a call today but subscribes to your newsletter is not a lost lead. They are a lead at an earlier stage, and your secondary CTA was the tool that kept them in your funnel.

Real-World Secondary CTA Strategies: What Slack, HubSpot, and Microsoft Actually Do

Theory is useful, but implementation is what converts. The companies that use dual-CTA patterns most effectively do so for business-model reasons, not UX aesthetics.

Slack's dual-CTA hero pairs "Try for free" with "Talk to sales." This works because the two buttons address fundamentally different visitor types -- individual self-serve users and enterprise decision-makers who need a human conversation. The secondary CTA is not a fallback for indecisive visitors. It is a distinct conversion path for a distinct revenue stream. Slack also uses device-adaptive CTA copy, changing button text based on the visitor's operating system, which further personalizes the primary action without adding visual clutter.

HubSpot's "Get started free" + "Get a demo" pattern maps directly to purchase funnel position. The free trial captures self-directed, lower-friction conversions. The demo request captures higher-value enterprise leads who need validation before committing. This is a business-model-driven dual CTA -- the two buttons serve different revenue streams, making the decision to include a secondary CTA a revenue strategy rather than a UX preference.

Laptop on a clean desk displaying a modern SaaS product interface with clear navigation Photo by Clément Hélardot on Unsplash

Microsoft Teams takes a different approach entirely. Rather than a standard signup or trial button, Teams uses "See plans and pricing" as its primary CTA -- a pattern that acknowledges the enterprise buying process, where cost validation precedes commitment. Secondary CTAs on the same page lead to feature tours or demos. The primary/secondary relationship is calibrated to visitor intent and sales cycle length, not to generic UX conventions.

The most instructive case study, however, is not a SaaS product. NerdCow's restructuring of Courier Exchange's CTA hierarchy doubled inbound leads within one month. The restructuring did not involve adding a secondary CTA -- it involved demoting secondary actions to ghost buttons or text links, tightening CTA copy to be more specific, and removing duplicate labeling across sections. The improvement came from clarifying hierarchy, not from adding options.

When No Secondary CTA Is the Right Answer

Not every homepage benefits from a second button. High-intent, single-action scenarios -- such as emergency or urgent service businesses -- are actively harmed by a secondary CTA.

GetUplift's HVAC case study is the clearest evidence. Removing the secondary CTA from the hero section increased phone conversions by 18% and form completions by 45%. Both primary conversion paths improved once the secondary CTA was removed. When visitors arrive with urgent intent -- a broken heater, a plumbing emergency -- a choice between "Call now" and "Learn more about our services" introduces exactly the hesitation that costs you the conversion.

Unbounce's research reinforces this from the opposite direction: reducing CTAs to a single primary CTA increased conversion rates by 266% in one documented test. When the page is designed to qualify and funnel visitors toward one clear action, a secondary CTA can signal an underperforming value proposition rather than a strategic necessity. If you are adding a secondary CTA because your primary CTA is not converting well enough, you are treating a symptom instead of the cause.

How to Decide: A Decision Framework for Adding a Secondary CTA to Your Homepage

The evidence is clear that a secondary CTA can expand your funnel or destroy it, depending on execution. Before you add or remove a second button, run it through a structured evaluation.

Notebook and planning materials on a desk representing a strategic decision-making process Photo by Glenn Carstens-Peters on Unsplash

The Evidence Threshold

A secondary CTA is justified only when scroll maps, heatmaps, or exit surveys provide evidence that a significant portion of visitors are leaving because they need more information -- not because the primary offer is unclear. Smashing Magazine's foundational design principles caution against adding complexity without a demonstrably better outcome. A secondary CTA adds visual and cognitive complexity to your hero section, and that complexity needs behavioral evidence to justify it.

If your heatmap shows visitors clicking around the hero area without engaging with the primary CTA, the diagnosis might be a confusing value proposition -- not a missing secondary button. If your exit surveys show visitors saying "I wanted to learn more before committing," that is the signal a secondary CTA can address.

Three Qualifying Questions

Before adding a secondary CTA to any page, answer these three questions honestly:

1. Do you serve two distinct visitor types with different conversion paths? Slack serves individual users and enterprise buyers. HubSpot serves self-directed starters and demo-requesting enterprise leads. If your two buttons would lead to the same destination with slightly different copy, you do not have two visitor types -- you have one CTA with an unnecessary variation.

2. Is your sales cycle long enough that some visitors need a trust step before converting? For a SaaS product with a free trial, the trial itself might be the trust step, and no secondary CTA is needed. For a high-ticket service business, a "Download our case study" or "Join our newsletter" secondary CTA keeps leads warm across a multi-week decision process.

3. Can you visually subordinate the secondary CTA without any ambiguity? If your design system or brand guidelines make it difficult to create a clear visual difference between primary and secondary buttons, the risk of hierarchy failure is high. Ghost buttons, text links, and lighter color treatments must be viable options in your UI framework.

A secondary CTA that fails any of these three tests is likely to reduce your primary conversion rate.

After You Add It: What to Measure

After introducing a secondary CTA, measurement must focus on its impact on the primary conversion goal -- not just on the volume of secondary CTA clicks. The BMG360 test is the definitive cautionary example: total engagement went up, but target conversions went down. If you track secondary CTA clicks in isolation, you will celebrate a metric that masks a net loss.

Set up your measurement this way:

Primary conversion rate before and after the secondary CTA introduction (the only number that determines success)
Secondary CTA click-through rate (useful for optimization, but not a success metric on its own)
Total conversion rate across both paths (the aggregate number should increase, not just redistribute)
Scroll depth and heatmap changes (to verify the secondary CTA is reaching evaluation-stage visitors, not diverting hero-stage visitors)

Conclusion: A Precision Tool, Not a Safety Net

A secondary CTA is not a safety net for an underperforming primary. It is a precision tool for serving a distinct visitor segment that your primary CTA cannot reach. Used correctly -- with clear visual subordination, segment-specific copy, and placement timed to the visitor's evaluation stage -- it expands your conversion funnel without competing with your primary action. Used carelessly, it introduces exactly the kind of choice paralysis that sends qualified visitors away.

The evidence from Slack, HubSpot, and Courier Exchange confirms the upside. The HVAC study and BMG360 test quantify the cost of getting it wrong. The deciding factor is not whether to add a secondary CTA, but whether you have the behavioral data and visual discipline to make it work.

Your next step: Run a 30-minute homepage audit before your next CTA decision. Open a heatmap or scroll map of your current homepage, identify where visitors disengage, and ask whether they are leaving because the primary offer is unclear or because they need a lower-commitment next step. That answer determines whether a secondary CTA will help or hurt.

References:

#secondary-CTA #CTA-hierarchy #homepage-conversion #ghost-button-design #call-to-action #homepage-design