One button or two in your homepage hero?

Key takeaways

Two buttons in a hero section help only when they serve different readiness levels, such as 'Get a quote' for ready buyers and 'See our work' for researchers, and when one is clearly primary. Two equal buttons make visitors stop and choose. If most visitors want the same next step, one button is better.

• One button when most visitors want the same next step.
• Two only for different readiness levels.
• Primary: solid and strong. Secondary: outline or text link.
• Never two equal buttons side by side.

Should a hero have one button or two?

A hero should have one button if most visitors arrive wanting the same next step, which is common for branded and urgent traffic. Two buttons can help when visitors split between ready buyers and early researchers. Even then, one should be clearly primary so nobody has to weigh them as equals.

• Why your homepage is not converting visitors into customers
• One primary call to action on your homepage

What pairs work well?

Good pairs serve different stages, not different versions of the same action.

• 'Get a fixed quote' (primary) and 'See recent projects' (secondary).
• 'Book online' (primary) and 'View prices' (secondary).
• 'Book a 15-minute call' (primary) and 'How it works' (secondary).

• A next step for homepage visitors not ready to buy

What pairs do not work?

'Call us' and 'Email us' side by side are two versions of the same action and split the decision. 'Learn more' and 'Contact us' are both vague. 'Services' as a hero button repeats the menu. Each of these adds a choice without serving a different visitor.

• Too many buttons on your homepage? Pick one path
• Call, form or email: which should your homepage push?

How should a primary and secondary pair look?

The primary is solid, in the one strong action colour, and comes first in reading order. The secondary is an outline or text link in a neutral colour. On mobile, stack them with the primary on top and make both easy to tap; WCAG 2.2 sets a 24 by 24 CSS pixel minimum target size.

• Button design: why visitors miss your website buttons
• The thumb zone: design mobile pages for one-handed use

How do you decide with data?

Track clicks on each hero button as separate events. If the secondary gets most clicks but few of those visitors go on to enquire, the pair is diverting ready buyers. If the primary gets almost all clicks, the secondary is unnecessary.

• Track homepage button clicks in GA4

What does this look like in practice?

A pattern we see: two identical green buttons, 'Our services' and 'Contact us'. Most clicks go to services, and the enquiry rate is low. Making 'Get a quote' the solid primary and 'See services' a text link usually moves clicks towards enquiries without losing the researchers.

• See client work
• Website Design & Development for UK businesses

Hero buttons checklist

• Decide if visitors really split by readiness.
• If not, use one button.
• If yes, make the pair serve different stages.
• Style the primary solid and the secondary as an outline or link.
• Stack them on mobile, primary first.
• Track clicks on each separately.

• A homepage for a business with many services
• How often should you update your homepage?

Next step

Set up click tracking on both hero buttons, if you have two, and check the split after four weeks.