CTA Button Best Practices For Boosting Conversions

You have a website. You get traffic.

Your visitors take one glance at your site and immediately get in touch with you.

Source

…or not.

If the first two steps are there, but your click-through rates and conversions are low, you’re not getting your happily ever after.

So what’s going wrong?

Maybe the visitors who come to your site are not well-suited for your company.

But if you are attracting your target audience and they still aren’t clicking that CTA button, it could have something to do with your CTA buttons.

What if your visitors can’t find your button? What if they’re unsure if it’s an ad or malware?

No need to risk losing all that traffic.

We’ll help you maximize your conversions and CTR rates with some CTA button best practices.

You can skip straight to the practical tips. But we suggest you stick around so you don’t miss the vital context.

What Is a CTA Button?

A CTA button is the part of your website that solicits a response from the visitors and guides them on where to go next to help them engage with your site the way you intended.

CTA stands for “call to action” or, in this case, “click to action.”

CTA buttons are a web design staple because they’re sharp, clickable, and grab the readers’ attention better than standard text links.

You probably have a few buttons sitting on your site, looking like this:

Source

Now let us ask you this: have you clicked on every single button you’ve come across?

Why not? They’re all buttons and have calls to action on them, right?

But not every button seemed relevant to your needs and worth your time.

Either that, or you couldn’t tell exactly what the button was supposed to do or why you should care, and didn’t want to bother figuring it out.

Your site visitors feel the same way.

So just plastering some buttons on your site to tick the box isn’t enough.

The real question is, what does a good button do differently?

The most effective CTA buttons do one of these four things:

1. Educate – help people learn more about your business
2. Guide – make navigation easy
3. Support – enable visitors to do what they came to do
4. Convert – turn visitors into donors, clients, or customers

And that’s why they’re successful.

If a site visitor doesn’t understand the button’s purpose or it seems irrelevant (whether that’s really the case or not), they simply won’t engage.

So let’s ensure your buttons do their job and get visitors to click.

7 Best Practices for CTA Buttons That’ll Make Your Visitor Click

We’ve established that having buttons isn’t enough of a reason for your visitors to click on them.

But you can make that click happen.

Here’s a quick overview of the CTA button best practices to help you get there:

And below is the full CTA optimization roadmap.

1. Use powerful conversion copywriting

Conversion copywriting is specifically designed to engage the visitor and drive the desired action, be it a purchase, registration, donation, download, or something else.

It explains what to do and why (or when) it’s a good idea for your visitors.

Source

You might think anything you put on your site counts as conversion copy.

But if your copy is fluffy or vague and doesn’t serve much of a purpose other than “well, we gotta put something on there,” – it doesn’t really qualify as conversion copy.

You need a more focused approach when it comes to CTAs and the surrounding copywriting. These pointers can help:

• Use action words – like “learn,” “start,” or “change”
• Keep your CTAs short and sweet
• Write in the first person
• Create a sense of urgency

Here are two great CTA button examples that demonstrate how to do this if your company is B2C or B2B.

The first one is B2C from the American Red Cross:

This short website section is simple and effective:

• You can’t miss the red button among the cold blues and whites, can you?
• Red Cross combines the first person and action verbs into “come to give” and “make an appointment” – it helps personalize the message and make it more urgent
• Speaking of urgency, besides the apparent “Urgent Need,” Red Cross takes a step further to specify just how urgent it is (by November 22)
• And, they incentivize potential donors with a simple reward – a $10 gift card

All that with barely four lines of text, including the button.

Here’s the second, a B2B example from Lavender:

Again, a few things to steal – uh, get inspired by:

• The button stands out in color and the font is larger than the surrounding text
• The information around it is relevant
• The text anticipates and solves problems:
  • “Do I need to get my wallet for this?” – nope, “no credit card required”
  • “Does it have integrations?” – yes, “integrates with Gmail, Outlook Web…”
• The star rating is a nice touch that backs their claim of being “the number one”

Both of these CTA button examples also follow the best practices we’re talking about next.

2. Make it accessible and clearly visible

The CTA button should be the most obvious and eye-catching item on the page.

The best copywriting won’t matter if visitors can’t read it or find the button in the first place. And if your button isn’t easily visible to people with color blindness or impaired vision, you’re missing out on potential customers.

You need to make your CTA button accessible to everyone.

So make sure it stands out in more than one way:

• Use an actual button element, not just a link in text
• Pick a modern color scheme with stark contrasts for better visibility
• Write in simple, legible font (larger than the text around it)
• Use clear positioning, with plenty of white space (so it stands out)
• Add a hover state to your buttons to encourage clicks

In this mock-up, the button rises when you hover over it:

Source

You can also use animation to draw the eye towards the button, like this:

Source

Accessible button design welcomes every visitor to your site and widens your reach. And colorful, fun elements ensure that nobody misses the memo.

Do you absolutely need these effects? Of course not.

But think of how many websites your visitors see each day.

Making your CTA buttons stand out can increase your conversions and make you memorable enough for return visits.

3. Design with mobile in mind

Desktop and mobile buttons shouldn’t be in the same location on a web page.

While we’re at it, desktop and mobile page design shouldn’t be identical because their layout is miles apart. What works on PCs doesn’t necessarily work on mobile devices.

Here are some things that often get lost in translation if you’re not careful:

• Links don’t work
• Placement of elements is skewed or awkward
• Pages don’t render well
• Images don’t load
• The auto-played video eats up the visitors’ data and frustrates them

To make the most of your elements, pay attention to how your site renders on each device and make individual adjustments accordingly.

Here’s an example from State Creative’s portfolio.

The desktop version of Zuli:

And the mobile version:

There is no weird horizontal scrolling or information overload. Only what you truly need, with the CTA button still above the fold.

Speaking of…

4. Keep the primary CTA above the fold on key pages

“Above the fold” denotes the part of your website that visitors see without having to scroll. It’s where they land on your homepage or services pages, and it’s where your primary CTA should be.

The logic is simple:

This part of your website gets the most attention, so you are sure that 100% of the page’s visitors will see your CTA button and potentially click on it.

Clear navigation is a crucial part of user experience.

Website visitors fully expect you to guide them from the moment they arrive, so don’t make them look around too long or backtrack to find a CTA.

People may choose to stray and scroll a bit first or click on something from the menu. But that’s only fun as long as it’s a choice.

If they have to work for it, they’re more likely to bail.

You can prevent that by plotting CTA buttons around your site like signposts, so visitors know where to go next, no matter where they land.

5. Give your CTAs a hand with supporting text and images

The CTA button doesn’t have to fend for itself. It’s best to complement it with surrounding elements like images and text to ensure clarity and a solid UX.

With that additional context, there’s less pressure on the few words that can fit on your button to relay the message on their own.

Take Charity:Water’s homepage, for example:

Each element is utilized to create a cohesive design and stress the same message:

• The copy describes the problem (water crisis) and brings the visitor into the picture as part of the solution
• In the background, you have a video that shows the impact of accessible clean water on real families, showing happy kids splashing and thriving
• The color palette is accessible and on theme – white (clean) and blue (water)
• The form could have been one button, but Charity:Water decided to prevent any confusion by describing exactly what will happen if you click and providing some options

Yes, the CTA button itself only says “join today.”

But as a visitor, you’re already immersed in the story, and there’s no doubt about what that means.

6. Stay in touch with current design trends

Websites have been around for a while.

If you don’t make an effort to keep up, you risk your site looking outdated compared to competitors.

If the site seems particularly rusty, potential customers might assume you’re not in business anymore.

Not a look you want to have. You’re offering modern services, so your UX and design need to reflect that.

Use these current CTA best practices to make the right impression:

1. Opt for solid colors rather than ghost buttons. If you have two CTA buttons, one after or next to the other, you can create a hierarchy by using a solid color for the main one and making the other one ghost.
2. Keep the button consistent with the rest of the UX. Don’t use a different font and color for every button, or make design elements differ from your whole site. The CTA button should stand out from the rest of the page, but not so much that it looks like an error or an ad banner. Otherwise, visitors might actively avoid it.
3. Personalize CTAs. Avoid leaving it at “click here” (especially without providing further context via surrounding text) and rather focus on the desired result and customer intent, like “see our animals” or “get a 15% discount.”

CTA optimization doesn’t have to be complicated.

Here’s a simple and effective example:

Source

This button fits with the style and voice of the rest of the site.

Note that it could have easily said: “learn more” like every other button ever – but “see our animals” lets the reader know what they’re getting, and fosters the message further.

But this doesn’t mean you should just do what everyone else is doing. Use the current design trends as your guideline, but add your own innovations.

Then, start strategically tweaking and test, test, test.

7. Meet your new best friend: A/B testing

Did we mention testing?

A/B testing compares multiple versions of the same page on your site to see which version results in better metrics. It’s the quickest way to measure which version of your CTA button performs best in terms of CTR rates and conversions.

You can google “CTA button A/B testing best practices” and learn all about them in theory.

But testing your options in context will give you the most precise and tailored advice possible.

There are plenty of case studies that prove A/B testing is a great idea. Here are two simple ones:

• One company in the banking sector had a 10% increase in form completion rate after changing the CTA button placement on their site
• A travel industry company fixed the high abandonment rate in its trip itinerary page and increased conversions by 8.6% by improving the visibility of the CTA button

Wondering what’s the best CTA button color or placement? Test it!

But do it in a controlled setting, one element at a time, so the results of each action are clear.

If you change your button placement, copy, color, and size all at once – whatever the results are, you won’t know what caused them.

Special: 6 CTA Button Mistakes To Avoid

Positive examples and tips are necessary to show you what to strive towards. But sometimes, you need to see examples of what not to do and why.

What’s the worst that can happen?

Mistakes in web design can cost you way more than it would take to fix them. When it comes to CTA buttons, these are the six to avoid:

1. Hard to read
2. Vague text (or no text)
3. Too many CTA buttons
4. Hard to find
5. Copywriting rubs the wrong way
6. Not optimized for mobile

Shall we?

1. Hard to read

If they can’t read the text on the button, visitors won’t take a chance on it.

Two common readability issues can ruin your UX:

1. Text not large enough
2. Color contrast not strong enough (between text and button color)

Here’s an example of what not to do:

Source

Using buttons like this results in your visitors squinting at the screen and clicking away.

Additionally, if the surrounding text looks like a wall of fine print, even attempting to decipher it can feel like too much commitment.

Your visitors aren’t there yet, especially right off the bat on the landing page. You need to remove obstacles between them and the action you want them to take.

So make the button and its text large, and use contrasting colors and simple terms.

Clarity comes first; persuasion after.

2. Vague text (or no text)

Before your visitors decide whether they’re interested in your offer, they need more information. Here’s what won’t work:

• Single word CTAs (or no text)
• Bland copy
• Lack of supporting text

Buttons like “click here” or “buy now” with no other context aren’t likely to drive a response from anyone.

Source

Sure, you know what each of your buttons do.

But the reader doesn’t. And they need to know what’s in it for them.

Visitors don’t want to solve a riddle to find the information they need, or perform an action simply because you’ve asked them to.

They could even suspect it’s malware and avoid clicking the CTA button altogether.

You can prevent that. Build trust with visitors and make the button relevant to their journey:

That said, you shouldn’t over-explain or offer too many options either.

3. Too many CTA buttons

Choice overload is a real thing.

Competing CTAs can be overwhelming. You don’t want to confuse visitors or send them on a scavenger hunt around your site – they won’t stick around.

We’re not saying options are bad.

You can provide multiple options. It’s a good practice to account for people in different stages of the customer journey and varying degrees of familiarity with your brand.

Some people need more education on the subject matter. Other visitors know precisely what they’re looking for and simply need you to convince them that you’re their best choice.

Still, try not to give them more than a couple of the most logical options via CTA buttons.

Focus on the UX flow and use the buttons to guide the visitors to the next most logical destination.

And don’t worry.

If they happen to need something you didn’t put on a button – that’s what the navigation bar is there for.

4. Hard to find

This mistake is pretty straightforward and follows our previous point’s conclusion: the more isn’t necessarily the merrier when it comes to web design.

Your CTA button can be challenging to find if:

• It’s surrounded by too many images or elements
• It’s too small – the same size as normal text
• It blends into the surroundings color-wise
• The placement isn’t optimal, and you didn’t put it above the fold

Source

While we’re at it, if you’re using an image for a button, it can become invisible because it’s inaccessible to screen readers.

Nothing indicates the button is there. And if the image doesn’t render, it won’t work.

Avoid this mistake by making your button large enough, contrasting the colors, and leaving enough white space around it, so no other element steals the spotlight.

5. Copywriting rubs the wrong way

This point depends on your brand and audience. Generally speaking, your copy should:

• Create a sense of urgency and tap into FOMO (fear of missing out)
• Follow the tone and voice the rest of your site is using
• Explain what will happen when the person clicks the button and why they should do it
• Target the right audience, not just anyone

However, always be respectful.

If your approach comes across as too negative or aggressive (whatever that sounds like to your target audience), it can offend or annoy visitors and backfire.

Don’t guilt-trip them into clicking or make the “no, thanks” option sound too self-deprecating.

Stick to softer persuasion and let your points speak for themselves, so the visitors feel like you respect their decision, even if it’s to leave your site.

That way, you leave the door open.

So, even if the readers don’t need what you’re offering right now, they might come back if the situation changes.

6. Not optimized for mobile

We don’t need to point out that most people access the internet from their phones.

If you only have a desktop version of your website, it likely gets jumbled on mobile and ruins the UX for many visitors. Some things, like links, may not even work.

Optimizing for mobile should be a high priority so you can tap into every opportunity that comes your way and maximize your returns.

Ensure your CTA buttons work on any device. Even if they do, check again every once in a while.

If they don’t? Well, maybe we can help.

Convert More Using Updated CTA Button Best Practices

Outdated design, unconvincing copy, and misplaced CTA buttons are okay if you want your site visitors to remain visitors.

But you don’t. You want them to convert to paying customers and donors.

The first step is helping visitors understand:

• What you’re offering
• Why it’s essential to them
• How to proceed on your site

The best CTA buttons do just that.

But all that conversion copy and A/B testing might seem… unappealing.

So why not let us do it?

State Creative can take a look at your site and handle your CTA optimization, among other things, as part of our Website Maintenance and Security pro and custom packages.

In the meantime, continue your journey of website improvement by reading about website maintenance and SEO next website maintenance and SEO next.