5 Best Practices for Effective CTA Buttons on Your Website

Call-to-action buttons do little of the “heavy lifting” when it comes to nurturing or converting your leads. Fortunately, they don’t have to; your marketing funnel has a slew of other mechanisms designed for this purpose. But this doesn’t mean that CTAs don’t play a vital role in the conversion process.

It’s the job of any decent UX designer to ensure that websites get the most out of every single one of their visual assets, and the good ones know that putting a little extra thought into a CTA button’s label, color or placement will grease the wheels of conversion.

And businesses know that even the slightest boost in their site’s conversion rate has significant long-term rewards for their company.

Over the past number of years, some best practices have started to emerge when it comes to creating highly clickable CTA buttons. In this article, we’ll take a look at some of my favorites.

1.  Use the appropriate action words

This is something virtually all good CTA buttons have in common – they focus on displaying an impactful verb.

Personally, I’m a fan of using a word that reflects the main function of the CTA. If clicking the button launches a specific process, tell the users clearly what that process is going to be. Do this by using the right verb in the button’s label.

• GiftRocket uses “send” because the process ends with a gift delivery.
• Crazy Egg uses “show” because the process displays an important UX metric to users.
• TimeTackle uses “connect” because the process links a user’s calendar to the site’s data dashboard.

In each of these three cases, the primary word in the CTA button’s label reflects the main function the product performs for its users. It’s an action word that reminds visitors what the website will do for them when they become customers.

2.  Use a unique but complimentary color

CTA buttons need to stand out from surrounding visual elements. Even on screens where there isn’t much clutter, a visitor’s eyes need to be drawn to the CTA.

UX designers achieve this using two techniques. Color is the first, and we’ll get to the second later.

Best practice when designing a CTA button involves choosing a color that is different from every other color on the user’s screen.

• This can be extremely subtle, as Havoc Shield shows us with their Book Onboarding button.

This button uses a color that stands out from the rest of the page but importantly still compliments the overall color scheme of the page.

Sessions College offers, in my opinion, the web’s best color scheme picker. Head over there if you’re unsure what hue is going to work best for your CTA button.

3.  Make it look like a button

The second tactic web designers use to make CTAs stand out from surrounding visuals is to make it look like a button. This triggers a sense of familiarity in a user’s mind – they’re used to clicking on things that have a particular shape.

Over the years, designers have started to move away from CTAs that look like physical, real-world buttons. Those days are over.

Nowadays, buttons are either perfectly square-shaped or have slightly rounded corners. Some sites choose to add effects like heavily feathered shadows. While I don’t mind this approach, I’m hesitant to call it “best practice.”

Feel free to play around with effects like these, though. If it’s aligned with your brand’s voice, you may find that this approach resonates with your users.

4.  Address common user concerns

Using a CTA button to address things an audience may be worried about is a tactic that web designers sometimes overlook.

Regardless of how effectively you incentivize people to click on a CTA, many of them still face internal resistance. People worry that clicking on a button will trigger something unpleasant. In other words, it’s a process that presents some kind of risk.

Maybe they’re worried that they’ll sign up for something with hidden costs, or that they’ll trigger a long, boring process which they don’t have time for.

Only you will know the “risks” that your target audience feels when they see your CTA. If you don’t, I suggest conducting a user-feedback session to find out.

Once you understand the main reason why someone is reluctant to click on your CTA, don’t hesitate to address it head-on.

Let’s take a look at three sites that have done this successfully.

• Skillcrush tells visitors clearly that they don’t need a credit card to get started
• Litmus makes it obvious that trying their product is free
• GoSquared makes three very important promises: An easy setup process, instant results and registration without payment

5.  Put the button somewhere logical

The text surrounding a CTA can act as an important click-motivator. For this reason, some clever designers place CTAs close to messages that “sell” something specific about their product.

This way, when a particular message resonates with a user, there’s a button in sight ready to take advantage of their impulse.

I love this approach, especially if you do it the way FreshBooks does it. The accounting software company places a CTA in no fewer than five places on their home page:

1. Next to a message advertising a discounted subscription option
2. Next to a selection of unique product features
3. Beneath a snapshot of the company’s Trustpilot reputation score
4. Above a selection of globally recognizable logos representing their list of clients
5. Below a message saying that signup is free

Freshbooks isn’t scared to pepper their home page with CTAs. This is working well because they’ve placed each of these buttons logically, next to a message that prompts conversion.

Final thoughts

In closing, it’s worth pointing out the importance of A/B testing when implementing a conversion-oriented element like a CTA button.

It’s virtually impossible to predict how users are going to respond to a change in a button’s label, shape, color or placement. At the same time, you can’t afford to wait weeks to see how a new button has affected conversion rates.

That’s why it’s generally a good idea to have more than one CTA button live at any given time, measure their performances against each other, and eliminate the “weaker” option.

I advise doing some research into A/B testing solutions. There are several options available to the diligent business owner who doesn’t want to leave their site’s performance to chance.