Pages often offer two actions side by side. The primary CTA is the one the page is built around, such as “Start free trial”, and gets the strongest visual treatment. The secondary CTA is a softer option, such as “Watch a demo” or “See pricing”, styled with less weight. Together they form a CTA hierarchy that guides most visitors to the main action while still catching those who need more information first.
Why use two CTAs
Visitors arrive at different stages. Some are ready to sign up, while others want to see the product working before they hand over an email address. A secondary CTA gives the second group a path forward instead of a reason to leave. The risk is that a strong secondary option pulls clicks away from the primary one, so the hierarchy must be visually clear.
Designing the hierarchy
The usual pattern pairs a filled, high-contrast button for the primary action with an outlined or text-style button for the secondary one. Keep the pair close together and use different verbs so the choice is obvious. Avoid adding a third or fourth option at the same level.
- Primary: filled button, strongest color, the action the page exists for.
- Secondary: outline or link style, a lower-commitment step.
- Consistent order across the site, so visitors learn the pattern.
- Both labels describe their outcomes plainly.
Choosing the secondary action
Pick a secondary action that helps undecided visitors move toward the primary one later. A product tour, a pricing page or a customer story usually serves that purpose better than an unrelated newsletter. Track both buttons and look at whether people who click the secondary option convert on the primary one later in the session or in a later visit.
Example
A trial button with a tour beside it
Hypothetical design-review tool Pinmarsh places “Start free trial” as a solid button in its hero and “Take the 2-minute tour” as an outline button next to it. Analytics show many tour viewers start a trial at the end of the tour, so the secondary CTA feeds the primary one rather than competing with it.
Common mistakes
Styling both buttons the same
Equal weight forces visitors to stop and decide which matters. The hierarchy should be readable at a glance.
A secondary CTA that exits the funnel
Linking the secondary button to a careers page or unrelated blog post sends interested visitors away from the decision.
Questions
The same primary action can repeat down a long page. What should stay single is the goal, so that every primary button leads to the same next step.
