The header CTA button: one action that stands apart

Key takeaways

A header call to action button gives visitors one obvious next step from every page. Use one primary action, such as 'Get a quote' or 'Book a call', style it as a button distinct from the menu links, place it at the right of the header and keep it visible on phones. Two competing buttons dilute it.

• One primary action in the header, not three.
• Style it as a button, distinct from text menu links.
• Word it as an outcome: 'Get a quote', not 'Submit'.
• Keep it visible on phones, outside the hidden menu.

Why put a CTA button in the header?

Visitors decide to act at different points: some on the homepage, some halfway down a service page, some on a case study. A header button gives all of them a consistent route without searching. It also tells first-time visitors what the business wants them to do next.

• How clear website navigation improves user experience
• Does website navigation affect conversion rate?

Which action should it be?

Choose the action most of your customers take to buy. Trades and local services often use 'Call' or 'Get a quote'; clinics and salons 'Book'; professional firms 'Book a consultation'; shops usually use the basket instead. If phone and WhatsApp matter as much, show the number as text beside the button.

• Where to put contact details on your website

How should the button look?

It should look like a button and different from the menu links: a filled shape in your accent colour with strong contrast. The GOV.UK Design System advises button text that describes the action and is short. Keep it the same size, wording and position on every page.

• Filled, high-contrast shape.
• Short outcome wording.
• Right-hand end of the header on desktop.
• Visible beside the menu icon on phones.
• Same on every page.

• Button design: why visitors miss your website buttons

Should the button be sticky?

A sticky header keeps the button in view as visitors scroll, which helps on long pages. It also takes screen space, particularly on phones. Keep a sticky header slim, and make sure it does not cover focused elements, which WCAG 2.2 success criterion 2.4.11 addresses.

• Sticky headers: helpful or in the way?

When is a header CTA a bad idea?

When the action does not fit most visitors, such as 'Buy now' on a site where buyers need a conversation first, or when there are several buttons competing. On e-commerce sites, the basket and account links usually do this job, and a sales button would distract.

What does this look like in practice?

A pattern we see: a header holds 'Contact', 'Get a quote', 'Book a survey' and a phone icon, all styled the same. Visitors cannot tell which is the main route. Keeping one filled 'Get a quote' button and showing the phone number as text gives one obvious action and one alternative.

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

Header CTA checklist

• Choose one primary action.
• Word it as an outcome.
• Style it distinctly from the menu.
• Show it on phones outside the hidden menu.
• Keep it identical on every page.
• Track clicks on it in analytics.

• How navigation shapes whether visitors trust you
• Menu order: which item goes first, and why it matters

Next step

Ask three customers how they first got in touch, and make that the header action.