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:

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:

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:

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

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:

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).

Source: KlientBoost

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

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:

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:

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:

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: 

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:

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.

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:

Source: FastCapital360

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

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:

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:

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:

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:

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

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:

Negative space should be a priority:

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

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.