DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

6 Characteristics of High-Converting CTA Buttons

by Jeremy Smith

Your CTA buttons are some of the most important little things in all of ecommerce. I’ve written plenty of times on the importance of CTA buttons. It’s a theme I can’t overemphasize.

In this article, I’m going to discuss exactly what, why, and when a CTA button works effectively.

First, I will do some show and tell — pointing out some of the high-converting CTA buttons from around the Web. Unfortunately, things could get ugly, because I’m going to show you some bad examples, too.

The good example buttons contain features that contribute to their success. You’ll notice that I’ve taken examples from all kinds of pages (and even things that aren’t pages) so you can see how these are used in a variety of different contexts. In some cases, I’ve interviewed site owners and/or admins to discuss their approach.

I’ll show you each one of these exceptional features, so you can see how it brings the landing page a greater degree of success. Finally, I’ll give you a rundown of all the factors at the end. If you’re short on time, you can skip to the end to see the 6 characteristics in list form.

Keep in mind that there are a legion of factors that contribute to a high-converting landing page. CTA buttons are just one ingredient among many. An effective Web page doesn’t depend on the CTA button alone, but upon a lot of factors — some obvious, some not so obvious.

As factors go, however, CTA buttons are among the most important. If you get your CTA right, you’re conversions will go up. It’s just that simple.

cta button placeit2

1. They are buttons.

I hate to insult your intelligence in this way, but it needs to be said. CTA buttons are buttons.

  • They are not text.
  • They are not hyperlinks.
  • They are not gifs.
  • They are not memes.
  • They are not black holes.

They are buttons.

The call to action is so important, so essential, so indispensable and so overwhelmingly powerful that you should not attempt to make anything but a plain button.

Not this kind of button.

an example of a  button

But this kind of button. This is what we’re going for.

CTA button

CTAs are not the place to unleash your creativity or to attempt to establish some new trend in the world of conversion optimization.

Here’s why. The human brain craves the familiar. We like ruts.

The brain has a circuitry, for lack of a better word. Although the brain has elasticity — e.g., its circuitry can be trained — the fact is, we like the old ways of doing things. If, tomorrow morning, the path from your bed to the bathroom was completely different, a few walls taken out or moved around, you’d have an issue trying to navigate it in the dark. The change has thrown you for a loop.

The same holds true with CTA buttons. As we’ve become accustomed to the online experience, we know that CTAs come in the forms of buttons. We see a button; we know what to do.

Make your CTA button a button.

Optimizely knows about CTAs. And they use a button.

Optimizely knows about CTAs

Other landing pages are far less effective. This agency — iCrossing — had a top paid spot for “social media services.” But what I encountered was less of a landing page and more of a mashup of marketing shill and self-promoting content. I couldn’t figure out what the CTA was, because there was no button. Is this it? Should I download the PDF? How do I get in touch with someone? What’s going on?

iCrossing bad CTA

The same frustration is present with yet another top spot in the paid advertising world. It’s Levy Online. Although they claim to be “the most trusted name in digital advertising,” I’m not buying it. They want phone calls? Ain’t nobody got time for that.

I want buttons.

bad example of CTA

I hate to keep pushing bad examples, but the fact is, some people still don’t get it. Like this website. I think they want me to convert on something, but I actually don’t know what the heck that’s supposed to be. Is it one of those Windows 8 style panels I’m supposed to click on? Help me out here, digital agency.

I’m not sure how much they bid for my click on that PPC ad, but they’re wasting their money.

You need buttons in CTAs

I need buttons. You need buttons. Buttons are what make people click and conversions happen.

South University at least has a leg up on iCrossing. They have a button. I know; it’s too small. And, I know, the button copy is less than inspired. But, hey, at least it’s a button.

South Univerity CTA

Constant Contact knows what they’re doing with this button. It’s big. It’s blue. And it’s in-your-face obvious.

Constant Contact CTA example

Generally speaking, buttons have the following characteristics:

  • They have a defined shape or border.
  • They have a different color from their surroundings.
  • They have text on them.

They don’t have to be rectangles, but they usually are. Sometimes, they have rounded corners, beveled edges, or shadow effects, all of which is totally fine. GetResponse’s landing is obviously a button — obviously clickable.

GetResponse’s landing page

2. They have compelling copy.

Far and away, the most important aspect of a button is not its color, not its size, and not its placement, but it’s verbiage.

The words on a CTA button are its most important feature.

This button from Hootsuite is an example of a straightforward, action-oriented approach.

Hootsuite CTA

This button from Sunglass Warehouse has a simple “Do It” which helps to contribute to its compelling nature:

Sunglass Warehouse CTA

Don’t panic about trying to cook up something really mind-blowing. Some of the most effective words in a CTA are also the most simple. The word “get” is one of the most effective.

The word “get” is one of the most effective in a CTA

The verbiage should be short. Anything that goes over ten or fifteen words is probably too long. Simple statements are best.

Simple statements are best in CTAs

You can get away with two sentences, as long as they’re short ones. Here’s what oDesk does: “Post a job. It’s free!”

oDesk CTA

3. They have logical placement.

In keeping with Fitt’s law, a button must be placed in the path of a user. Notice how this happens in this simple example. I’ve added the arrow to draw your attention to the fact that the sidebar tracks a user’s read path from top to bottom, culminating in the CTA button at the bottom. This is a logical placement.

placing a CTA button

The goal in placing a CTA button is to put it where the user is going to look next. As a designer, you can anticipate or predict this behavior.

There’s nothing really complicated about this idea, but I’m surprised at how many marketers overlook it.

One example I’m consistently nonplussed by is Apple’s site, which places their CTA in a non-intuitive location.

Apple CTA

Here’s a straightforward example of CTA button placement:

example of CTA button placement

This button from Social Media Examiner does a great job. One of the features that makes it so successful is the arrow. Even though the CTA button is placed off center, the arrow points to it, making a seamless eye path from the copy to the capture form.

CTA button is placed off center

Directional cues come into play with the following CTA, too.

Directional cues in CTA

Many landing pages use the tried and true technique that goes like this:

  • Headline
  • Marketing Copy
  • Capture form and CTA

This simple model has a logical conclusion: The CTA button at the end. Here’s Vertical Response to show you how it’s done.

Vertical Response CTA at the end

Long form landing pages sometimes take too long to get to the CTA. But still, the placement is logical, as with this example:

Sitespect CTA

4. They use a contrasting color.

Although I’ve opined about obsessing over button color, I do think it’s important. It’s just not as important as some frothing-at-the-mouth bloggers would have you believe.

The effective CTAs that I’ve examined all have this in common: They have a contrasting color.

Let me use an example from email marketing, so you can see how this applies in a non-webpage context.

This is an email from CrazyEgg. The first thing you see in the email body, after scrolling to the end, is this yellow button:

email from CrazyEgg

I think a lot more marketing emails could learn from this kind of approach. First, you should have a CTA button in your emails. After all, why not? Second, you should use a button with a contrasting color.

The whole idea behind a CTA button is to draw the user’s eye to it. You can’t do this effectively unless the color itself is helping you to do so.

Here’s one from Pagewiz that basically screams “click me!” Nice powerful red color!

Pagewiz CTA

In fact, red and orange seem to be some of the more popular CTA colors. This one comes from Disruptive Advertising.

Disruptive Advertising CTA

The button below is used on Social Media Examiner, and uses the color orange.

Social Media Examiner CTA

Neon green on blue background? It works for Toonimo.

Toonimo CTA

5. They have close proximity to the previous action.

Effective CTA buttons make it easy for users to convert, simply on account of the fact that they’re nearby — right in the path of the users eyes and action.

Effective CTA buttons

Many websites use parallax scrolling. Each section comprises its own discrete action. And when the user scrolls down, they have the opportunity to convert on the CTA button. This is an example of having close proximity to the previous action.

get Smart’s CTA button

6. They don’t compete with other crap.

CTA buttons bow to nobody, nothing, nuh-uh.

A CTA needs to be in a class of its own, surrounded by ample white space. Do not create a self-defeating CTA by making it compete with other elements on the page.

Here is an example of what not to do. I was not able to obtain metrics from this company, but I surmise that they could increase their conversions if they were to leave off the “view our work” button. You see, this button serves to detract the user’s attention from “Get started today.” Instead of getting started, the user is going to waste time looking at case studies. Why the competition? It’s not necessary.

Digital sherpa's CTA button

Let me show you a good example. This CTA has scads of white space. The eye is drawn towards the button. Everything about the page — images, bullet points, headline, etc. — it all comes down to that single CTA. Bam!

Brandwatch’s CTA button

Facebook’s CTA button here is its own boss. There is nothing else that demands the user’s attention quite as boldly.

Facebook’s CTA button

The same thing is true for Formstack. All that white space is the servant to the big orange CTA button.

Formstack CTA

Conclusion

Making a CTA button isn’t that hard. It’s like so much of conversion optimization and online marketing. The best way is usually the most obvious way. If you have common sense and use common sense, you’ll win.

Here are the six characteristics of high-converting CTA buttons.

  1. They are buttons. Save your creativity for another occupation, like writing novels. Button up.
  2. They have compelling copy. Use verbs. And please, for the lost love of conversions, don’t use the word “submit.”
  3. They have logical placement. Eyes move in paths, not jumps. Put it where it will be seen.
  4. They use a contrasting color. Although I don’t advance the idea of toying with shades of gray or blue, or green, I happen to know that buttons with color contrast convert better.
  5. They have close proximity to the previous action. The mind and the pointer have a symbiotic relationship. Your CTA becomes part of that symbiosis as it moves directly into the cognitive and visual flow of the user.
  6. They don’t compete with other crap. If you want to purposely lose conversions by crowding out your CTA, go ahead. I, for one, advance the idea that the CTA should be king of the page.

Ready to go rack up some conversions. If your CTA buttons aren’t following these rules — or worse, if they’re not even buttons — do yourself and the world a little favor and get them working right.

I swear your conversion rate will hit the roof.

Read other Crazy Egg posts by Jeremy Smith

5 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Jeremy Smith

Jeremy Smith is a serial entrepreneur, trainer and conversion consultant for Fortune 1000 companies. He has a powerful understanding of human behavior and profit-boosting techniques. You can learn them by downloading his latest ebook: Landing Page Optimization for In-House Marketers.

5 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Rocky says:
    December 9, 2015 at 5:51 am

    YES, YES, YES!

    This is SO on point!

  2. Steven says:
    October 1, 2015 at 6:18 am

    Some data would have been nice in this article. Lot’s of good ideas and conjecture, but CRO needs data, precisely because of the surprising and unpredictable nature of CRO. Every CRO study or test has the potential to become (and often does) an M. Night Shyamalan movie. Without data there’s not much to act upon here. For example: regarding the Do IT button, the author’s opinion that it “helps to contribute to its compelling nature” is possibly correct, perhaps even likely. But is it actually effective? We don’t know! No data. Still a good read, though. I will be frequenting crazyegg more in the future. 🙂

  3. John Martin says:
    October 17, 2014 at 2:32 pm

    “We see a button; we know what to do.” Just Perfect!!!

    • Neil Patel says:
      October 19, 2014 at 2:16 pm

      John, actionable suggestions are the best!

  4. John Zakaria says:
    October 17, 2014 at 3:41 am

    I thank you Jeremy for discussing how can anyone Create high converting CTA buttons and i will apply your techniques on my campaigns.

Want to make your site better?

Find out by seeing how users click and scroll through your website:

Show Me My Heatmap

I love sites with – combine that with and it gives such a great set of data to inform /

Andrew Martin

@AndrewDoesSEO