9 Important CTA Design Tips for Buttons That Make People Click17 min read

Digital Marketing August 26, 2022 10 min read

author:

9 Important CTA Design Tips for Buttons That Make People Click17 min read

Reading Time: 10 minutes

Your call-to-action (CTA) is the climax of your marketing strategy. Whether you’re asking for a purchase, sign-up, or download. Everything up to this point has been to get potential customers to your landing page. And sometimes, you’ve only got a few words to seal the deal.

That’s why your CTA button is your site’s most important design element. Because it can turn passive visitors into active users.

Call-to-action buttons seem simple. But they’re easy to mess up. Or be completely missed. These 9 CTA design tips will make sure you get that conversion. Plus, lots of helpful examples:

  1. Make your button look clickable
  2. Be descriptive with your copy
  3. Size and space properly
  4. Connect using first-person
  5. Create urgency and use strong verbs
  6. Try a subheading
  7. A/B test variations
  8. Pay attention to mobile version

Make your CTA button look clickable

Making a button look ‘clickable’ sounds silly. But you wouldn’t believe how often sites get it wrong. And it’s mostly to do with the outline and color of the button.

Conversion rate trends come and go. Like the transparent “ghost button” with a thin border and text that fades into the background color. While they might look cool, they tend to grab less attention. The opposite of what an effective CTA should do.

The only time this design usually works is as a secondary button:

A single ghost button as the main CTA is bad. Using it as a secondary button to the main one is good practice.

Source: UX Movement

Here’s another example of CTA buttons not being obviously clickable. Sure, this design agency’s landing page looks cool. But you’d be forgiven for scrolling past this case study:

A CTA button that blends into a small sub-heading under the main title "Creating the world's first community-driven superbrand"

So, how do you make people click? For higher conversion rates, your button should be big, bold, and work with your chosen color scheme. 

Netflix uses its signature red to draw your attention. Almost like a stop sign:

Netflix uses a red "Get started" CTA button next to their email address box.

It can also work to have a contrasting color, so it stands out. Like what eCommerce platform BigCommerce has done here:

"7 Retail Strategies to Overcome a Growth Plateau" in white text with a navy background. A bright blue CTA button next to it with white text that says "Download guide".

This applies to the text in the box too. Make sure it contrasts so you can read it properly.

Gradients can also work within the same brand color scheme. They give things a modern, more youthful feel:

A purple to lilac gradient CTA button with white text that says "Get started" against a navy backdrop.

Source: Monday

My advice here would be to try and keep your CTA design obvious. Doing something out of the box might sound like a good idea but humans are creatures of habit. And you’d be amazed by how many will miss the point.

Be descriptive with your copy

One of the simplest conversion rate optimization (CRO) tactics is great copywriting. But not just with big chunks of text. Microcopy is just as important and covers the smaller details.

You usually see it in contact forms and social media status update bars. Like Facebook’s famous “What’s on your mind?” or LinkedIn’s “Start a post”. 

Microcopy can help:

  • Tell users what to do
  • Make suggestions
  • Address concerns
  • Provide context

Your CTA button copy is another example. And it should tell people exactly what they’re going to get/what’s going to happen when they click it.

This used to be IMPACT’s CTA button. “Free download”. Not very imaginative, eh?

Source: IMPACT

But by making it more descriptive, they increased conversions by 78.5%. “Show me how to attract more customers” clearly appealed more:

It’s tempting to just write “Click here”. But there are so many alternatives that will engage users and hopefully inspire the desired action.

So, what should you write? First, you need to identify conversion intent. You want to align with where users are in the funnel and where they came from (traffic source).

The purchase funnel and types of content that align. Strangers - attract with blog, premium content, ads. Prospects - convert with checklists, infographics, eBooks webinars, courses. Leads - close with trials, demos, consultations, audits. Customers and Promoters - delight with surveys, referral programs, add-ons, early releases.

Source: KlientBoost

Then you need to emphasize the value of what you’re providing. And handle any objections.

Match the feeling e.g. "I tried, I'm stuck, I need help". Actionable next step e.g. "Match me with a dev". Handle the objection e.g. "Try Prisma in 5 minutes". Make it specific e.g. "Start a 7-day trial for $7".

Source: Marketing Examples

It’s such a unique process. And it’ll depend on your niche and brand voice. But whatever wording you choose, don’t forget to keep button text short and to the point.

Size properly and use white space

CTA button design is much more than the color too. Button size is another small detail that can really affect click-through rate. And white space is just as important as the text itself.

A lot of this will depend on your web design. Negative (white) space draws attention to certain elements on a page. You don’t want a cluttered homepage. There needs to be an obvious path for the visitor to follow.

Airbnb is one of the best examples of negative space done right. And a contrasting color to make it extra obvious:

A black background with a white heading in the middle "Open your door to hosting". Underneath a pink CTA button that says "Try hosting".

Buffer has a little more on their homepage but they still keep the CTA button close to the main copy. Plus, an example of using ghost buttons effectively. This makes it very clear what to do next:

Buffer's landing page that says "Grow your audience on social and beyond". The main CTA button (Get started now) is blue with white text with a transparent button next to it saying "Watch video".

The bigger your button, the more noticeable it is. And it needs to stand out to draw attention. But not so much that it takes over the page and spoils the UX.

If you’re prone to migraines, look away now. Here’s an example of how not to do it:

An extremely cluttered landing page with text and buttons everywhere about cruise holiday comparisons.

Source: Justinmind

So many elements here look like a button. I’m not even sure this site knows what it wants visitors to click on.

In contrast, what’s the first thing you see on Spotify’s landing page?

The huge “Go Premium” button, right? That’s how to design a clear user path.

Lastly, is there anything else you’ve noticed about the CTA designs for the good examples? If you take another look, you’ll see something pretty much all of them have in common.

Scientists found that humans like “shapes with gentle curves as opposed to sharp points”. They’re more pleasing to the eye and make us feel more peaceful. Because of this, most effective call-to-action buttons are rectangles with rounded corners.

Source: CleverTap

It’s the most popular format for a reason. But try different options. Your audience might prefer something else.

Connect using first-person

Better CTA design can be one tweak away. Sometimes, a single word.

In copywriting, we’re taught to use the word “you”. Because it makes the reader feel like they’re being spoken to directly. So you think that would apply to your button copy too, right? Weirdly, not so much.

Unbounce discovered that changing the copy on their landing page from “Start your free 30 day trial” to “Start my free 30 day trial” increased click-through rates by 90%.

So, why is this? Well, when someone feels connected to a product, they’re more likely to convert. It gives that personal touch without having to know anything about them. 

Marketing psychology shows purchasing decisions are mostly based on emotion. So, you want your website visitor to feel like it’s their choice.

Writing “my” helps the user visualize the action they’re about to take. It gives them control and (hopefully) nudges them towards decision-making. 

Plus, it can show they’re going to get immediate value. Like on Crazy Egg’s homepage: 

"Show me my Heatmap"

Source: Crazy Egg

1-800 Contacts is the world’s largest contact lens store. But they do the same. They make sure their CTA buttons are aimed at one person only:

"Find my contacts/Reorder my contacts"

Source: 1-800 Contacts

Not a lot of companies use this technique. Which means it stands out when you see it. So, why not give it a try?

Create a sense of urgency and use strong verbs

Your copy needs to create a sense of urgency and grab users’ attention. This works especially well for eCommerce businesses. Using words like “now” and “today” can help spur action. Because they suggest the offer won’t be around forever. 

“Buy now” is a classic. But we can do better than that with our CTA design.

"Start seeing results today! Get started now"

Source: GoSquared

You could try wording like:

  • “Treat yourself today”
  • “Unlock discount now”
  • “One-off free download”

You also want to make your offer attractive and spark curiosity. So, start with a strong verb. Not something that seems like it’ll be an effort. That’s an easy way to put people off.

Here are a few examples of what I mean:

Try these: Rather than these:
Discover Register
Connect Submit
Claim Pay
Join Complete
Start Send
Save Invest
Explore Contact
Find out Support

The left-hand side sounds like your users will get something from clicking. The right-hand side sounds like they’ll need to give up time or money. 

You can get really creative too. Like this version of Huemor’s homepage:

A CTA button that says "Launch" and "Do not press" underneath.

Source: FastCapital360

Or Humboldt County’s old landing page that gives it a mystical twist:

A graphic of a white rabbit that says "Follow the magic"

Source: ConEmprendimiento

Brainstorm ideas with your team. No matter how ridiculous. You’d be surprised what you’ll come up with and end up using. But whatever wording you choose, don’t forget to fulfill your promise on the other end.

Try a subheading next to your call-to-action button

Sometimes, people need a little nudge. And a bit of text under your CTA button can do the trick. It’s not a regular “subheading”. But it’s the easiest way of describing it.

If we think of the button text as the heading, the most popular subheading you’ll see is “No credit card details needed”. But yours can say anything. And it’s fun to get a little creative with it.

A lot of the time, they’re used to give the potential customer confidence. And they can address the main pain points people might have:

"Why not? It's free forever"

Source: CoSchedule

CoSchedule understands users might think it’s only a free trial. So, “Why not? It’s free forever” clarifies.

You can also use them to add some social proof:

"2,691 companies signed up in  the week alone!"

Source: Basecamp

This gives you instant credibility because users can clearly see others already trust you. It can also inspire FOMO as people think there must be reasons for so many subscribers.

If you have a special offer or extra value that comes with your service, use your subheading to highlight it:

"Plus, get a complimentary walkthrough with an SEO specialist"

Source: Moz

Microcopy is a chance for your brand voice to shine. Even if it’s only a single sentence. So, don’t be afraid to be a little cheeky if it fits:

"Get 17+ new marketing ideas that are better than what you have"

Source: KlientBoost

You can also be specific with exactly what’ll happen after people click. Tell them: 

  • What they’ll get (new marketing ideas)
  • How many (17+)
  • And why they should care (they’re better than what you have)

Use these examples as templates for inspiration. Or do something totally different. Just make sure it fits into your brand identity and have fun with it.

Don’t forget A/B testing

Most CRO tools aim to improve user experience (UX). And you may already be doing this with the main parts of your webpages. But you should be doing it with the small elements too. 

Amazon is notoriously picky about its CTA button designs. Especially with 3rd party usage. So, make sure you’re not breaking any rules with yours.

After that, little changes to your button design can have a huge impact. So, compare different types of CTA buttons. Then A/B test variations of:

  • Button color
  • CTA copy
  • Font
  • Placement in page design
  • Pop-ups
  • Contact forms
Changing the color of a "Try now" button from blue to orange increased click-through rate from 25% to 38%.

Source: Snov

As I discussed earlier, sometimes changing just one word can increase conversion or click-through rate. But before you jump in, you need to understand how visitors navigate your site.

You want to find out things like:

  1. What elements they’re trying to interact with
  2. Where they come from
  3. Your site’s user journey/purchase funnel
  4. People’s motivation for being there

Source: GIPHY

Once you’ve got this information, you can experiment with things based on fact, not guesswork.

It’s usually easier to compare an A and B version with CTA design. But you can increase this and try multivariate testing. Simpler is usually better at first. That way, you’ll have a clear winner. 

But there’s nothing stopping you trialing that winner against another version after that. You should always be testing and comparing. Even when you’ve found something that works. That’s what successful brands do.

Pay attention to mobile version

A quick tip to finish. Your design elements will look very different on a mobile screen. You’re working with a much smaller display and fewer pixels. So cluttering becomes a whole lot easier.

Everything we’ve covered becomes more prevalent in your mobile version. Contrasting colors need to stand out more:

Spotify's mobile landing page - purple gradient background with green "sign up" button.

Negative space should be a priority:

Airbnb uses negative space to help "find out more" button stand out

And even your subheading might sit in a different place. As mobile users may not scroll down far enough to see it underneath:

"Go Premium and unlock more features now" is above the "Learn more button" on Pocket's mobile landing page.

Shout-out to CleverTap for those graphics

More thought needs to go into your UX in general on mobile. Because mobile accounts for over half of all global search traffic. You can’t expect your desktop version to translate. And a little bit of effort could result in a much higher click-through rate.

Conclusion

Effective CTA design is made up of lots of these little details. I’ve said it so many times throughout, but the smallest tweak could be all it takes. Even something as insignificant as the color or shape of the outline.

A/B testing is the only way you’re going to know. And you don’t even need an expensive CRO tool to do it. Just track your conversions. Make a change. And see if there’s an increase or decrease from the usual number.

Just give your call-to-action button the attention it deserves. It could be the difference between a new customer or a lost opportunity.

Have you seen any original CTA designs recently? Have you made a small change that’s increased conversions? Let us know in the comments below.

Summary
9 Important CTA Design Tips for Buttons That Make People Click
Article Name
9 Important CTA Design Tips for Buttons That Make People Click
Description
Your CTA design can turn passive visitors into active users. Here are 9 tips to make sure people click to get you that conversion.
Author
Publisher Name
Quuu
Publisher Logo
Leave a comment

Your email address will not be published.