Website calls-to-action (CTA) – Examples and best practices

A call-to-action (CTA) is a critical part of driving actions and conversions on your website. They're the visual prompts and pathways that guide visitors through your website and towards a desired outcome like demo requests, purchases, or filling out a contact form  – conversions like these are all influenced by the placement, design, wording, and overall quality of your CTAs.

Without strategically crafted CTAs, your website essentially becomes a passive informational piece. Visitors are left to self-navigate and determine their own paths, which can lead to them abandoning their journeys.

CTAs solve this by making the desired action crystal clear. When designed and positioned with purpose, calls-to-action quite literally "call" users to take the right action at the right moment.

What is a website CTA?

On websites, a call-to-action refers to any graphical or text-based element specifically intended to drive visitors to click and transition from their current page to another specific page or a specific action.

Common examples include:

• Navigation bar buttons (e.g. "Contact us", "Get a demo")
• In-page buttons or images (e.g. "Download the report")
• In-copy text links (e.g. "Read related content")
• Page footer banners or buttons (e.g. "Book a consultation")
• Site overlays or popups (e.g. "Don't miss this offer")

CTAs can vary in their, visual style, and functionality. These variables impact their efficacy for your audience.

Why are website CTAs so important?

CTAs are essential for nudging buyers through key content and pages on your website – from awareness, to consideration, to decision.

Without these navigational signposts, most website visitors would likely leave because they're unsure of what to do or where to go next for the information that supports their journey.

From a conversion standpoint, CTAs make it crystal clear what action you'd like visitors to take and the mutual benefit of doing so.

According to research:

• Well-placed CTAs can boost conversion rates by over 80% (Source: Unbounce)
• 90% of visitors who read your headline also read your CTA copy (Source: Visualization Usability)
• CTAs with emotional motivators generate twice as many conversions (Source: HubSpot)

What are the common types of website CTAs?

On a typical website, calls to action appear in numerous places, and serve different purposes.

Top navigation CTA

One of the highest-visibility placements is a CTA button fixed in the top navigation menu – usually aligned to the far right. Popular options include:

• Book a demo
• Start free trial
• Talk to sales
• Book a call
• Contact us

These persistent CTAs provide continuous exposure and are typically used for bottom-of-funnel conversion goals.

Homepage hero CTA

Most website homepage hero sections feature one or more bold call-to-action buttons. These goals are usually similar to your top navigation CTA, so you'll likely see some repetition here.

While the hero area is highly visible for new visitors, it can also be an ineffective CTA placement if visitors aren't primed to take action yet.

In-content link CTA

Within the body copy of a website page or blog post, CTAs can appear as traditional hyperlink text (e.g. "Read this related content") or visually as stylised links. These are for converting engaged readers as they consume core content.

Footer CTA

Website page footers frequently feature CTA banners or buttons offering similar actions as the navigation CTAs. These are intended as a final attempt to convert visitors before they exit the page.

Popup CTA

Some websites trigger animated popup CTAs when a visitors completes certain behaviours. This is a last-ditch effort to keep visitors engaged and convert them before they leave.

Best practices for using CTAs effectively throughout your website

Let's look at some proven best practices for implementing CTAs effectively:

Navigation CTAs

• Stick to a single, prominent call-to-action in the top navigation menu. Too many options can overwhelm visitors.
• Avoid generic "Contact us" and opt for clearer objectives like "Request a demo" or "Talk to sales" that set accurate expectations.
• Colour and design the CTA button to stand out clearly from other nav links.
• Ensure the CTA aligns with the intent behind why visitors typically take that action.

In-content link CTAs

• Limit to just 1-2 strategic CTAs within your core page content to avoid overwhelming the visitor. 
• Use contrasting colours or design elements to make CTAs nicely visible without disrupting the content flow.
• Aim CTAs to appear alongside logical points when the reader's interest/action makes sense.
• Use a text link format instead of buttons if aiming for a lower profile approach.
• Always ensure CTAs have a clear and compelling reason to click.

Homepage hero CTAs

• Test both using a CTA and removing CTAs entirely from this section as performance can vary.
• If including a CTA, use clear, concise copy that has clear action, rather than a vague message.
• Consider rotating different CTA offers and placements to gauge what resonates best.

For page banners and footers

• The conversions on bottom-of-page banner CTAs are usually poor. Only use them if performance metrics show strong conversion influence.
• Make sure the CTA aligns with where visitors will be at that particular point in their journey.
• Consider removing your bottom-of-page banner CTA and using a footer form instead. We've seen this improve both the quality and quantity of high-intent conversions on websites.

Popup forms

• Try to stick to using exit-intent popups as these are less disruptive to the user experience. 
• Always include a clear exit or "No thanks" option to dismiss them.

General CTA best practices

Across all in-content CTA placements, design, and copy play a significant role in their efficacy. Generic CTAs like "Learn more" can work but tend to underperform compared to compelling copy that highlights benefits, creates urgency or solves a core challenge.

For example, changing a basic "Learn more" button to "Learn how Acme generated 1.5M in revenue" would likely significantly outperform the former.

With CTAs, specificity, clarity, and relevance are key drivers of engagement.

Beyond messaging, visual design elements like contrasting colours, directional cues, white space, and even simple animations can all further increase the ability of CTAs to command attention and influence click behaviour.

The best way to use CTAs in blogs

For blogs and article pages, the primary goal should be facilitating an uninterrupted reading experience. So, the approach to using CTAs must be more strategic:

• Avoid sidebars crammed with multiple CTAs, social sharing icons, etc. as these create distractions and detract from the content itself.
• A single, substantial CTA at the very end of the post can be effective for converting readers who made it all the way through. Offer similar, more in-depth content on the same topic like a pillar page.
• The most strategic placement is often a text CTA around the 1/3 to 1/2 point of the post when visitor dropoff tends to spike. Design these to catch eyes without disrupting full read-through engagement.
• Banners or multiple CTAs scattered throughout blog posts should be avoided to maintain a clean content experience.

The key is using CTAs purposefully in your blog content without overwhelming or interrupting the primary task visitors came to complete.

When to avoid using CTAs on your website

While essential for improving conversions, CTAs can sometimes have the opposite effect when overused or positioned poorly in areas that disrupt or detract from the user experience, such as:

• Sidebars and banners that make pages look busy and CTAs look like ads
• Multiple CTAs on product pages that may induce choice paralysis
• Obtrusive exit-intent popups which can annoy and alienate visitors

Too many CTAs, particularly in busy or intrusive placements like these, can overwhelm visitors and "dilute engagement" instead of driving desired actions. Aim to create an uncluttered experience.

Software generated vs HTML CTAs

When building out the calls-to-action across your website, there are two main approaches: using software/tracking CTAs generated by marketing tools, or coding HTML links. Each has its own advantages and ideal use cases.

Software/tracking CTAs

Software-generated CTAs are created using marketing automation and analytics platforms like HubSpot, Marketo, ActiveCampaign and others. These CTAs are inserted into your website pages as embedded code.

The primary benefit of this approach is enhanced tracking and data collection capabilities. Software CTAs allow you to easily monitor and record click metrics, conversion rates, audience behaviour flow and more within the marketing tool itself. This integration provides valuable insights for optimisation.

When to use Software CTAs:

• For CTAs related to gated offers, content downloads, landing pages etc. where funnel tracking is crucial
• On higher-stakes conversion pages like pricing or checkouts
• When you need advanced audience segmentation, A/B testing, or real-time personalisation capabilities
• For measuring the performance of CTAs across different marketing channels and campaigns

However, software CTAs also have some potential downsides if overused:

• They can contribute to slower page load times compared to basic HTML
• They often mask or obscure the destination URL on hover (reducing usability)
• The additional tracking codes can create frontend coding conflicts
• They require an existing marketing automation tool subscription

HTML CTAs

On the other hand, hard-coded HTML CTAs are the traditional, static approach to building website navigation and content links. This includes basic text links, buttons, image links and other HTML elements.

The main advantages of HTML CTAs are:

• Faster page load speed since no external scripts/tracking codes are involved
• Clear URL display on hover for enhanced transparency
• No third-party tool costs – just your existing web environment
• Ability to customise designs/styles directly in your codebase
• Avoid potential frontend coding conflicts with third-party apps

When to use HTML CTAs:

• For standard website navigation menus and in-content body links
• When you don't necessarily need advanced tracking at the link level
• On pages where maximising load speed is critical (blogs, mobile, etc.)
• If you don't have an existing marketing automation tool
• For cleaner frontend coding and oversight of all CTAs

The downside is that HTML CTAs don't integrate with marketing tools, so you lose the ability to capture detailed click data and conversions directly within those platforms. However, you can still measure general traffic flows through Google Analytics.

The ideal solution is to strike a strategic balance – using software CTAs for your highest-stakes conversion points while defaulting to HTML CTAs across most other areas of your website for speed and usability.

Creating an effective B2B website

CTAs are an important element of any B2B website, but they're only a small part of it. There are lots of components that need to work together to create an effective website that drives conversions and revenue for your business.

Want to know how you can improve the overall effectiveness of your website? Check out the complete guide to effective B2B website design.