Call to Action Buttons: 10 Examples and Best Practices

Look at any high-performing website, and you'll instantly see a key feature that drives more conversions than any other element: the call to action (CTA) button. This critical element triggers a swift response from otherwise passive website visitors. If properly designed, it can compel customers to place orders, schedule consultations, and more.

Why are call to action buttons so important?

Strategically designed CTA buttons can be used to convince website visitors to complete a specific action. Some aim to instantly convert users, while others serve as valuable steps in the sales funnel.

Calls to action can be used to prompt visitors to:

• Sign up for email newsletters
• Follow brands on social media
• Complete lead generation forms
• Take quizzes
• Browse ecommerce products
• Schedule consultations
• Seek quotes for specific services
• Sign up for free trial subscriptions
• Register for webinars
• Register for in-person marketing events
• Download eBooks or other content

While these intended interactions vary from one campaign to the next, all aim to get website visitors connected with your brand. Without an obvious visual cue, users may wander your page without seeking greater involvement—or worse, they might abandon your website altogether before they get the chance to produce conversions.

<div class="tip">Now that you know why CTAs are important, learn how to write an effective call to action that works.</div>

10 Call to Action Best Practices and Examples

Ready to amp up your call to action efforts? While no single strategy will produce perfect results in every context, a variety of best practices hold true in most situations, as detailed below:

1. Pay attention to size

As a general rule, conversion-worthy CTAs are smaller than photos or other highlighted images, but larger than standard webpage text.

• Larger buttons are usually more effective, but there are exceptions; a lot depends on the goal of your landing page and the relative size of other website elements.
• Small buttons can sometimes prove compelling when visually striking colors and outlines are used.

Scale also matters when emphasizing buttons that feature multiple calls to action. The most important CTA should always be larger than the others.

Airbnb achieves effective scaling by emphasizing the webpage's primary function with a discernible search button. Smaller CTAs encourage visitors to learn more about recently booked properties and opportunities for hosting without distracting from the main button.

In some situations, multiple CTA buttons may hold equal importance. Uber serves as an example of this phenomenon, as the ride-hailing app's website aims to attract both drivers and riders. Simple, equally-sized buttons let visitors know where they can sign up to take on either role.

2. Place CTA buttons strategically

Proper sizing is key, but even the largest, most distinctive call to action button will quickly be lost if placed in the wrong location. While this button can technically be placed anywhere on the page, it should be immediately visible to users.

In the past, most CTAs appeared at the bottom of web pages. However, many brands today opt for central locations that minimize the need for scrolling.

Under the modern approach to CTA button placement, users can view content before clicking on highlighted buttons—but they're also free to click through if they choose to. This approach is helpful for users visiting websites with the intention of signing up for services or purchasing featured products. Excessive scrolling will discourage these visitors and cost you valuable conversions.

Many websites place at least one call to action within the header menu, where it can be always be seen by visitors as they scroll through the rest of the page's content. However, CTAs should also be used throughout the page when appropriate, as the header CTA won’t appeal to everyone.

The header menu represents just one of several design elements worth considering when determining the CTA's ideal location within an overarching layout. Strategic placement ensures that visitors complete desired tasks in a specific order. For example, if CTA buttons are situated next to or directly below easy-to-complete forms, users will be more likely to enter contact information or other data before pressing highlighted buttons and moving on to the next page.

GrubHub's website reveals the value of placing buttons near short digital forms. The site's homepage encourages customers to enter their zip code or street address in a text form strategically placed above a bright blue CTA. This vibrant button gets the point across with the simple yet compelling message "Find food."

HelloFresh employs a similar approach, but includes a few extra steps to "trick" users into completing and submitting lead generation forms. Prior to viewing CTAs, new customers encounter buttons to designate their meal preferences and the number of people they intend to serve.

Once they've highlighted these parameters, prospective HelloFresh subscribers click the "Select this plan" button. This leads them to a separate page on which they are encouraged to enter email information. Before they know it, previously casual visitors have signed up for meal plans, or, at minimum, opted into future marketing messages.

In select cases, CTAs may strive to slow users down, rather than delivering immediate clicks. These buttons play into the general flow of the user experience. On occasion, businesses may want visitors to engage with content in other ways before moving forward.

This reasoning influences the common placement of CTAs directly below important terms of service. If these were placed in a different location, users might neglect to read or even glance at these terms—and as a result, they might be unaware of what they’re signing up for.

If you want to get visitors to interact via text message, you should place your CTA button right below the corresponding CTA. The Planned Parenthood website, for example, encourages visitors to "chat now," but first warns them that message and data rates may apply.

3. Use contrasting colors

Color impacts decision-making among consumers. The right hue can evoke feelings of calm, trust, or excitement. For this reason, color psychology has long played a key role in a variety of business decisions, including everything from product packaging to store design.

The value of color psychology extends to digital marketing, in which shading for logos, backgrounds, and other elements may place customers in a specific state of mind. With CTA buttons, web designers aim to deliver the greatest possible sense of urgency in hopes of convincing viewers to click. Bold hues are generally best, although the surrounding color scheme should be considered.

In addition to building critical contrast into web pages, the right CTA color can tie a variety of elements together to deliver a greater sense of cohesion.

Netflix makes great use of this strategy on its landing page, where its bright red CTA encouraging visitors to "Try 30 days free" stands out against a compelling—but not distracting—backdrop.

The vibrant red of this button makes it easy to locate. It also matches the red of the Netflix logo, creating a unified sense of branding.

4. Experiment with design

While internet users intuitively understand that CTA buttons will take them to desired landing pages, they feel more compelled to click on buttons that stand out. The most appealing buttons tend to feature modest 3D effects that make them noticeable unlike their flat, lifeless counterparts.

A variety of design elements can be called upon to deliver the impression of dimension. Subtle shadows and gradients deliver the greatest effect without appearing gaudy.

CTA buttons can also be made more appealing through the use of rounded edges. In Visual Perception, Jürg Nänni explains that rectangles with sharp edges require more cognitive effort than similarly sized ellipses. By reducing such effort, rounded edges provide the split-second edge needed to convince otherwise reluctant website visitors to click.

You can see an example of this on Twitter's login and sign-up page.

5. Concise wording is key

It’s possible to focus too much on the color of your CTA button or the highlighted text's font. While these factors can impact conversion rates, they take a back seat to the content itself. Direct copy is critical for CTA buttons, which can, by nature, only contain a short phrase or sentence.

Website visitors should intuitively know what will happen if they click CTA buttons. Stick with action-oriented language that conveys how you expect users to behave—and what will happen when they click through to the next page.

Action words worth highlighting include:

• Join
• Continue
• Subscribe
• Claim
• Download

While most CTA buttons contain simple phrases, a single word can sometimes be even more effective. Instacart, for example, gets its point across by encouraging visitors to submit zip code information before moving them along with simple and effective instructions placed within a clearly defined CTA button. There is never any question as to what visitors should do or what will happen when they click the "Continue" button.

Minnesota’s Caribou Coffee employs a similar approach by highlighting each merchandise category with a compelling photo and two sentences of copy. Below, a basic button encourages visitors to stop by the website's eCommerce platform with the simple instruction "Shop."

While relatively few customers visit Caribou's website with the intention of buying merchandise online, the site's effective use of CTA buttons prompts visitors to make purchases far exceeding the value of their typical cup of coffee.

The need for concise language within the CTA button is clear, but the same is true of the surrounding content. After all, CTA buttons do not exist in a vacuum. The most impressively designed button can drive significant conversions, but only if complemented by effective copy.

6. Reassure visitors

Fear holds internet users back from converting, even when presented with enticing designs and offers. Effective CTA buttons dispel such fears with just a few words. Spotify, for example, accomplishes this with a simple and effective button that prompts potential subscribers to access the platform's huge music collection at no cost and without the use of a credit card. The simple phrase "Get Spotify free" puts prospective subscribers' minds at ease, thereby increasing the probability that they’ll sign up.

Further information meant to reassure visitors can be included directly above or below the CTA. Like Spotify, Dropbox Business delivers the promise of a free trial within the CTA button before further setting prospective users' minds at ease with the statement "No credit card needed."

7. Keep it simple

While sizing, placement, and a variety of other factors warrant consideration, the simplest buttons are often the most effective. Don't feel pressured to go all out with an elaborate button when a straightforward approach will do.

Ultimately, the best CTAs convince website visitors to click—and no, this is not always accomplished by the most complex design. When in doubt, users will gravitate toward basic buttons that they can easily see and use, particularly if those buttons complement the surrounding content.

To ensure simplicity, keep visual clutter to a minimum in areas surrounding CTA buttons. The more white space, the better. When distracted by copy, photos, links, or other visuals, visitors are less inclined to click.

The website for the book series Pocket Penguins captures the value of the white space approach. The landing page's background may be colorful, but it breaks up graphics, text, and buttons with plenty of space. As a result, the CTA is easy to find and click.

8. Personalize content

The same CTA will not appeal to or serve all visitors equally. Customized buttons—sometimes referred to as smart CTAs—drive the specific behaviors desired from various types of customers. For example, CTA content may differ based on whether a particular consumer has visited your website in the past. First-time visitors are prompted to complete lead generation forms or sign up for email newsletters, while loyal customers may require further convincing via discount codes or other special offers.

9. Track CTA metrics

With so many variables impacting the performance of a seemingly simple CTA button, it is often difficult to know where or how this critical feature can be tailored to produce the best results.

Detailed analytics provide a valuable snapshot of your CTA's efficacy—and where room for improvement exists.

Key metrics worth examining include:

• Click rate. How many visitors actually click on your CTA button? Do certain types of buttons attract a better response than others?
• Submission rate. If your CTA leads to or follows a form, how often do customers enter the requested information? Experiment with various placements in relation to CTA buttons to determine the specific circumstances in which customers are most willing to follow through with this critical process.
• eCommerce conversion rate. When customers click on buttons directing them to eCommerce pages, how often do they continue to shop? Do they abandon their carts before checkout—or do they complete the entire process and make a purchase? While a variety of factors influence eCommerce conversions, each button plays a critical role in convincing website visitors to continue through the sales funnel. Consider tracking not only overall conversion rates, but also situations that prompt cart abandonment.

10. Go beyond website content

Although typically associated with website landing pages, CTA buttons may also be featured within marketing emails, where they improve the likelihood of viewers moving beyond their inbox and visiting highlighted websites.

An initial email-based CTA button may serve as the first in a series of guided interactions, with the ultimate intention of moving consumers through the sales funnel and toward a purchase or other commitment.

CTA buttons are also vital on social media. While Facebook and other platforms offer limited opportunities for customization compared to websites and emails, they still provide the potential for dramatic increases in conversions. Social media CTA buttons move passive followers beyond their news feeds and onto websites, where additional CTA buttons can then be called upon to deliver targeted interactions.

Final Thoughts

Few website elements deliver as much conversion potential as call to action buttons. These features might not seem notable at first glance, but their simplicity is their strongest asset: the ability to get casual users to click through and continue interacting with your brand. Don't underestimate the power of CTA buttons; they may be the key to your most impressive digital marketing initiative yet.

This article was written by Compose.ly writer Stephanie Lica.