Neil Patel co-founded Crazy Egg in 2005. 300,000 websites use Crazy Egg to understand what’s working on their website (with features like Heatmaps, Scrollmaps, Referral Maps, and User Recordings), fix what isn’t (with a WYSIWYG Editor), and test new ideas (with a robust A/B Testing tool).
If you had to pack all your conversion wisdom and power into one tiny space, it would be the call-to-action button.
It’s amazing how a single button can make or break an online business.
I believe there’s no such thing as a successful marketing effort unless there’s a successful CTA.
That’s why I’ve spent a lot of time and money making sure that my call-to-action buttons are as optimized as possible.
I’ve co-founded businesses and helped thousands of entrepreneurs, so I know how important conversions are.
And, more importantly, I know how the call-to-action button plays into that success.
Along the way, I’ve learned a few things that can usher in floods of conversions, plus some things that can destroy conversions.
In the paragraphs that follow, you’re going to discover exactly what I learned about creating call-to-action buttons that work.
But first, I want to cement in your mind why you need to care about these buttons in the first place.
What is a Call-to-Action Button?
A call-to-action button is a piece of text, sometimes combined with an image, that tells your audience what you want them to do next. For instance, you might insert a call-to-action button at the end of your blog posts.
It might invite readers to check out more posts, sign up for your email list, or something else entirely.
Your call-to-action button is the bridge between the content your visitor is already interested in and an offer of higher value.
It’s typically the button, link, or image that you place strategically on your website to encourage visitors to become leads or customers.
It can take the traditional or non-traditional approach in terms of looks, copy, or any other facet you can think of.
That’s what makes it so incredibly testable and important to an entrepreneur.
There are literally hundreds of options for just about every occasion.
Why Improve Your Call-to-Action Button?
Remember that your call-to-action button can be used in any situation where you want your user to do something.
Which makes it the moment of truth that differentiates a conversion from a bounce.
Here’s a basic example of how you can accomplish this from Optimizely.
As you can see, the highlighted button is just a typical example of a call-to-action button you’d see on a normal landing page.
It has copy surrounding it, and a place for the visitor to input some information.
You can’t get more basic than that.
So I want to give you advice that makes it extraordinary.
To do that, we want to evoke emotion in our audience.
According to Marketing Experiments, consumers go through a six-step process before clicking a CTA on an email or landing page:
- Arrest attention
- Build connection
- Build problem
- Build interest
- Build suspense
- Transfer momentum
How To Create a Call-to-Action Button in 15 Steps
Your CTA is the last phase of this process, which means your job is to make it a seamless transition from your copy to your CTA.
These tips will help you do that.
1. Use a color that helps your CTA button stand out
First, your call-to-action button should be a color, preferably not white, gray, or black. Beyond that, however, it should be a color that stands out.
The number of color combinations, gradients, shadows, fonts, kernings, borders, and other options is infinite. Make it easy on yourself with this quick color-choice checklist:
- It needs to be a color.
- It needs to stand out from the background.
- It needs to not clash with the background.
- It needs to grab your attention.
To find out if a color grabs your attention, simply create a variety of buttons and do the glance test.
You can use ButtonOptimizer to create the buttons.
Lay them all out and take a one-second look. Which one is most noticeable?
A lot of this decision-making will depend on your site’s color scheme, the existing design elements, and the background color.
And before you dismiss this section as being all hype, this type of optimization is based on tested fact.
Indeed, a color can influence how we perceive the ambient temperature in a room. It’s that powerful, so don’t dismiss the need to look for the best color for a call-to-action button.
One recent example of this comes from marketer Matthew Woodward, who decided to see how different CTA colors affected their click-through rate.
He took his original CTA, which was green:
And then put it up against four other colors:
Every other element of his landing page stayed the same.
And here are his results:
As you can see, every single color variation outperformed his original. While the orange was less than 1 percent better, all of the other colors performed significantly better.
Simply by changing the color of a single button, his click-through rate grew by more than 10 percent.
And experimenting with the color of your CTA can have similar results. The only way to know is to test for yourself.
2. Keep your CTA design simple
I’ve seen people do some really dumb things with buttons. They think, “Oh, so the button is supposed to stand out! Okay, I’ll put images, arrows, and CSS effects on it!”
This could be a mistake. Testing has proved that the best call to action button design choices are those that have a simple statement and few design frills.
For example, Midas Media recently conducted a test of 90 different high-conversion CTA buttons to see what they could uncover. What they found was that simpler designs seemed to have better results than buttons with a relatively more elaborate design.
A simple element like “boring” font colors, such as white, was noted on almost all of the designs. This is likely the case because the highest performing button colors included orange, blue, red, or green. White is very readable on these colors and so would be a better choice than a “fancier” color.
Since the most popular button colors were orange, blue, red, and green, it also makes sense that more neutral colors like white, black, and grey were used in the design surrounding the button.
The simplicity of the background surrounding the CTA buttons allowed the visitors’ attention to be drawn to the bright colors of the buttons themselves, upon which was readable white font. They used basic design elements to point visitors where they needed to go.
3. Size it sensibly
Here’s the rule on size: Make your button a size that makes sense. Bigger is not always better.
The whole point of a button is to make people click on it. So, make it easy for them to do so. If you make it too big, however, it looks odd or unnatural and may cause people not to click on it.
This point is especially true when it comes to mobile. If you create a CTA button that’s obtrusively big on a mobile device, no one will want to click it. They’ll likely just think you’re annoying.
The average consumer spends 69% of their time-consuming media on a mobile device. That means they’re more likely to find you when browsing on a mobile device than with a desktop.
Here’s an example of a sensibly sized CTA from Dollar Shave Club’s mobile site:
Notice how the buttons are sized appropriately in relation to the copy and imagery used?
If the buttons were larger, they might get in the way of the clean design elements.
And if the buttons were smaller, they wouldn’t be easy to click with the smallest of thumbs.
So remember to optimize your CTA button size for both mobile and desktop. You’ll get more conversions and more customers.
4. Let them choose if you must, but only offer two choices
Humans love choices, right?
Sort of. The truth is that presenting your audience with too many choices can backfire quickly.
Most of the best call to action button examples only offer the user one choice. Consider, for instance, this CTA from Hello Bar.
There’s just one CTA: “Create a free account.”
If you check out the Hello Bar on my website, though, you’ll see two options:
Notice, however, the way in which I phrased the second choice. It’s negative and makes the user uncomfortable.
Nobody ever has enough traffic, do they? That knowledge makes clicking the negative call-to-action button uncomfortable.
Another instance in which you might use two CTAs is when you’re targeting two different audiences.
For instance, you might ask your visitors to click on a CTA for men or another meant for women.
5. Make it look clickable
If the user is going to click on something, they need to know it’s clickable.
Since we’re talking about “buttons,” I think this is pretty obvious, but let me just drive the point home with a few specific instructions.
Things that look like buttons…
- Have a rectangular shape
- Have clear boundaries or borders
- Have white space surrounding them.
- Use a contrasting color
Your button should look like a button to get more clicks.
To give you an idea of what this looks like in practice, here’s an example of how Suntrust makes their button look clickable:
It’s a contrasting color, has a logical flow with the rest of the page, and has a rectangular shape.
All of these elements add up to make it look clickable and draw your eye.
And they’re not the only ones using these tricks. Here’s a look at the popular website hosting company HostGator:
It’s the exact same method. The button is rectangular, contrasting, and strategically positioned.
Which means the more you can make your button look clickable, the more conversions you’ll win.
You’ll notice that most call-to-action button phrase examples start with action words. That’s another subtle trigger that lets the reader know the element is clickable.
6. Make the CTA button the next obvious action
Buttons are part of the larger flow of a landing page or conversion funnel.
As a user moves mentally through the process, the button should be the final, and culminating, climax of the process.
He or she should know — “Ah, now I’m supposed to click on the button!”
My original call to action back in 2014 simple said, “See plans and pricing.” It was pretty generic but got okay results.
That wasn’t good enough though, so we revamped our testing and came up with a call-to-action button that looked like this:
“Show me my heat map” had a 20 percent higher CTR. My takeaway was that calls to action that were the next obvious action of the conversion funnel were more likely to convert.
And after years of continual testing, “Show me my heat map” is still the number one call to action on that site:
The next obvious action of Crazy Egg is that people want to see what I just described to them in glowing terms. They don’t want to look at “plans.” They want to see a heatmap!
So should you implement a call to action that prompts the next logical step? Yes.
7. Keep your button copy short
Button copy is like the KO punch.
It has to be a straight, hard, packed-with-power jab in just the right place. You’re not spilling words all over.
Instead, you’re choosing just a few words very carefully.
Here’s a look at what I mean:
See how easy it is to quickly read and click the one on the right?
Think about road signage.
You know, in a split second that a stop sign says “Stop,” that a yield sign says “Yield,” and that an exit sign says “Exit.”
Each sign has clues of color, size, shape, and placement that indicate its purpose and message.
Call-to-action button copy is the same way.
You’ve prepped the user with messages, colors, codes, placement, and a suggested intent based on the flow of the page.
Now, they need to simply glance at the button to just be pushed over the edge.
When they get to a button, people should no longer be in reading mode. They’re in clicking mode.
Glance. Click. Done.
Remember the study we looked at when addressing the need to keep design simple?
Well, that same study found that those high performing CTA buttons tended to use very few words:
In fact, none of them used more than 12 words. And some marketers even go so far as to limit themselves to only 60 characters.
Here’s a comparison to show you what I mean.
This button below is borderline too long. There are 63 characters, including spaces. Plus, there are too many words.
One of those words has five syllables! I find myself working too hard to read it, much less click it.
The next button from my personal site is way shorter. You’ve got one overpowering, straightforward message:
8. Make your copy sizzle
Button copy is not throwaway copy.
It’s one of the most important words on your page.
I can’t tell you exactly what your copy should say, but I can tell you some of the techniques that improve conversions.
Use action words
Verbs are the most important elements of button copy. “Get,” “Reserve,” “Own,” “Dominate,” “See,” “Give,” “Use,” “Try” — these are all words that suggest action and momentum.
Instead of using words like “Subscribe” or “Download,” try shaking things up with unique and action-oriented words.
Like when Sumo decided to change their call to action from “Get it Now” to “Gimme.”
While this might seem gimmicky, it had an amazing effect on their conversions.
They saw a drastic rise of 182%.
And while this might not be the best action word for your site, it shows that the right word can make all the difference.
The only way to know for your site is to test new words and variations until you find what works.
Use timing words
It’s helpful to create a sense of urgency. The word “now” often helps to push people into action.
Another word is “today.”
As long as people feel a bit urgent, you’ve accomplished your goal.
Here is one button that uses the word “Now.” While it doesn’t adhere to some of the other elements we’ve been discussing, it’s still a good example of how you can use timing words.
Keep it positive
Occasionally, some marketers — including myself — have used the negative technique, which involves telling people not to click or inviting them to click on a negative message.
This technique should be used with care. Generally, people feel more optimistic when they see words like “Yes!”
Ugmonk did a great job of this with one of their popup overlay CTAs:
By creating a positive response that contrasts heavily with the negative option, they prompt you to take your 10-percent-off gift.
It’s a classic example of how positivity in a call to action can be a much better choice than a negatively charged option.
Use a few obvious nouns
Whoever your users are, there are a few words that they really like to hear. “Guide,” “Ebook,” “Course,” etc.
Your button copy should explain what it is that they will see or get once they click.
Amazon’s buy button uses both a compelling action word — “proceed,” suggesting movement — and an obvious noun, “Checkout.”
With its use of a contrasting color, this button possesses a powerful sense of progress and value.
The word “free” is often used in button copy, and with good reason. It suggests to the user the value they will get when they click on the button.
Your value proposition was communicated earlier in the funnel. Now, with your button copy, you need to remind people of that value proposition through a few strategic words.
MailChimp does a great job of this on their site with a centrally placed call-to-action button:
This helps remind their website visitor that there’s no risk involved with trying out their service.
That makes it a great way to keep pushing you further into their sales funnel.
Keep your message consistent
The final thing to remember is that you need to keep your messaging consistent throughout all of your copy.
Consistency in your copy will help reduce confusion and improve your click-through rate.
Overall, keeping consistent messaging creates a better UX and makes conversions more likely.
To do this, you need to make sure that your call to action directly reflects the content that came before it.
Don’t say, “Download our free guide” when you’re offering a way to help improve your lead’s content marketing.
Instead, say something like “Revolutionize your content strategy.”
It’s topically relevant, interesting, and stays consistent with your message.
This helps your visitor stay on their journey without any potential hiccups or unnecessary confusion.
Here’s an example of how you can accomplish this with your marketing.
As you can see, Epic uses their homepage as a landing page that shows off success stories.
9. Use first person
Your audience loves when you speak to their needs.
In fact, it’s what they want most of all in your copy, landing pages, and calls to action.
Generally speaking, when you see advice for call-to-action buttons, you’ll be told to use the second person “you” or “your.”
But Flint McLaughlin from Marketing Experiments disagrees and instead recommends performing a “four-letter test” on your page to see how effectively you actually speak to your audience.
In short, use this test to determine whether you’re talking to or at your customer.
If you’re talking to your customer, you’ll connect and use elements like first-person calls to action.
But if you’re talking at them, they’ll likely leave and never come back.
The result will take your calls to action and cause a transformation like this:
The result is much more enticing because it’s already personalizing ownership with your user.
Another conversion killer you should look out for is “we” according to WordStream.
When you use the word “we,” you take the focus of your message off the solution you’re presenting.
It puts it on you instead, which immediately conveys a lack of trustworthiness to the party being sold to.
You might think it conveys a team building attitude, but the reality couldn’t be further from the truth.
By sticking to only first person, you can provide a path to build trust and create excitement through ownership.
When it’s already “my trial” or “my guide,” I immediately want to see it.
Your audience will want to see it too.
10. Create a sense of urgency
It’s a well-known fact that creating a sense of urgency in your marketing can improve your conversions.
The same applies to your call-to-action button as well.
You’ve probably seen this type of approach on websites with links that say “Buy today and get 50% off!” or something similar.
That type of approach is exactly what I mean.
Here’s how I used a site overlay popup to push conversions on my own site:
As you can see, I employ a page overlay, so it’s guaranteed to be the sole focus of my audience’s attention.
I then extend an enticing offer that has a countdown, which creates the sense of urgency.
You can also take the approach Amazon does and show progressive amounts of scarcity on your products:
By coupling a good deal with direct scarcity and a hard time cap, they’re able to drive their visitors to decide on the product that they’re selling.
Many times, that decision is made solely by creating urgency in the buyer.
But it doesn’t always have to be negative incentives that create urgency.
Positive actions like promoting a product as “new” is also a great way to drive conversions too.
Take this example from Fitbit’s homepage:
By promoting their new product, they encourage loyalists to their brand to update to their newest technology.
It also instills a fear of missing out — or FOMO.
That fear is what drives this entire trip home.
When your audience is afraid they’ll miss out on a special offer or product, they’ll feel the heat and act.
Driving urgency with your call to action can help you improve conversions quickly and consistently, so long as you don’t overuse it.
11. Consider “lazy” calls to action
I realize that not all sites are going for a soft sell.
Sometimes, conversions aren’t just getting clicks or email addresses.
Often, your goal is to get a purchase immediately.
Sites that focus on e-commerce are especially prone to poorly optimized CTA buttons, and iZooto linked this to an emphasis on crafting neat bells and whistles instead of focusing on CTAs.
At any rate, the temptation is real to make your product pages look cool but neglect CTAs, which makes this advice incredibly important.
In these cases, there are tricks you can use to help make the decision process easier, shorter, and ultimately more enticing.
I call these types of call-to-action buttons “lazy” call to actions because it taps into the commonly touted marketing principle that “people are lazy.”
If you’re going to ask for information, a credit card, or money, it’s in your best interest to make the process simple.
Utilizing cart buttons, or even a prominent “pay with PayPal” button, can be the push your visitor needs.
Here Spotify shows us how we can strategically place the pay with PayPal button to increase conversions.
Instead of having to input a credit card, which might be a hassle, you can simply click once and be on your way with their service.
It’s the ultimate form of convenience that mimics the real-life equivalent of paying at a cash register.
12. Use white space effectively
According to the International Design Foundation, white space is one of the foundational elements of good web design.
They claim that “Macro white space” acts as a container for your design, and can be incredibly calming to your user.
I believe them too because I’ve seen this work when helping clients optimize their call-to-action buttons.
In this case, white space is the area around your call-to-action button.
It deals with how strategically you place the button to maximize clicks.
Crafting the right amount of white space has helped my clients direct their visitors’ attention and draw them towards the clickable call-to-action element.
If you want a good example of this, look no further than Google’s homepage.
There’s no question as to what you should be doing here because you’re limited to only a few options.
You can click the graphic, input a search term, and then search or click “I’m Feeling Lucky.”
While it’s arguable that Google doesn’t need any help from whitespace design, I believe otherwise.
I think it’s one of the reasons their design is so consistently successful and trusted.
And this thinking bears up when you start looking at other major brands who use white space effectively.
There’s so much white space on this landing page that you almost don’t even notice it.
They use the vast blank space to insert an image that draws the eye, tells a story, and creates direction toward their offer.
It also helps calm you, which builds trust and makes you want to click through.
All because of tactical white space design.
13. Optimize the location
To take white space a little deeper, you want to make sure that your call-to-action button is in a prime location.
Even with plenty of white space and proper design, it’s still possible to bury your CTA or create too much hype.
Think of it like you would an in-person sales pitch.
You don’t always go for the sale immediately.
You time your offer when your potential client sees the value and is open to your suggestions.
Location is the “timing” element of your call to action.
The idea is to take your visitor’s current position on your site and in their customer journey into account in your “pitch.”
Where should you put it then?
Typically you’ll see a call to action at the end of a blog post with relevant copy.
But Hubspot found that only 6% of conversions come from CTAs at the ends of posts.
So, as you can see on my blog, I include a sidebar call to action that stays with you as you scroll through the post.
Which means at any point, a reader could input their website URL and go further into my sales funnel.
This goes against the conventional end-of-post call-to-action button, but it works quite effectively.
And if you really want to optimize a post or page, that same Hubspot study found that between 83% and 93% of leads came from anchor text.
That means your internal linking is one of the most important CTA “buttons” on your blog post.
Plus, as you saw earlier when I told you about creating urgency, specialized landing pages or pop-up site overlays can also be an effective way to get your offer in front of your audience.
You’ll also see call-to-action buttons with a more “traditional” location, which I really like.
This is a good example of classic placement from YouTube Red.
You’ve probably seen thousands of landing pages exactly like it, which is why it’s such a good tool.
It means you’re more likely to trust the brand, click through, and use the service.
The only way to really know what the best location is for your call to action is to test it yourself.
Like when I tested the common practice of putting a call to action “above the fold” of my website.
When I did, it decreased my conversions by 17%.
That was against everything I’d been led to believe about what would happen.
But just because it works for others doesn’t mean it’s going to work for you.
I learned that lesson the hard way, so you don’t have to.
So test your call to action location as much as possible, and then keep on testing after that.
You’ll eventually find what works best, and then you can run with it.
14. Be super specific
Specifically telling your prospect what they’ll be getting is another method you can use to get your visitors to click on your call to action buttons.
This tip gets a bit tricky in application because you don’t want to have a call to action that’s too long.
They were trying to get more traffic to their deal pages, so they tested two different calls to action.
Their first button simply said, “deals.”
The second button stated a specific number of deals, such as this example that says “104 deals.”
Guess which one performed better?
The second version gave them a drastic increase in clicks for their deals pages, all because they made it more interesting.
By generating curiosity with a specific offer, they increased conversions and discovered a new tactic for future use.
15. A/B test
At the end of the day, the only way to ever truly improve your call-to-action buttons and increase conversions is to test them.
In fact, I’ll bet you’ve noticed that most CTA advice you get is about testing.
That means you need to learn how to A/B test.
And it really isn’t hard.
You’ll discover simple changes can have drastic effects, and your call-to-action buttons are a perfect place to start.
Test your copy.
Test the design elements around your button.
Test every single tip I’ve given you in this post because not all of them will work for you.
Then test again when you’ve found an element that improves your conversions because it can always be better.
It’s all part of a cycle of decision, action, reaction, and then continued decision.
By singling out the most impactful elements in your call to action, you will increase your conversions and revenue over time.
And please, don’t just copy your competitors.
It may work sometimes, but copying ideas won’t always work for you.
A day will come when you have to innovate, and the sooner you do that, the better.
But the only way to know anything is to test.
Adding Effective Call-to-Action Buttons on Different Platforms
You don’t have to limit yourself to a single platform when using call-to-action buttons. In fact, you shouldn’t.
For instance, you might have a different CTA for your AMP pages than you do for pages that render on non-mobile devices.
Similarly, you can use CTAs on popups as well as on static pages on your site. You might want to incorporate them into your Shopify store.
Fortunately, most platforms make creating call-to-action buttons super easy. There’s usually a drag-and-drop interface or a WYSIWYG editor to help you along.
How to Add a Call-to-Action Button on Facebook
Facebook is a huge game-changer when it comes to reaching new members of your target audience. Why wouldn’t you hit them with CTA buttons?
It’s easy to add them to your Facebook page. On your business page, click on the “Create Call to Action” button. It’s right below your primary image.
Select the copy you want to use for your CTA button. Make sure it aligns with the content you’re publishing.
Next, provide Facebook with the appropriate link. For instance, you might send viewers to your homepage or a landing page.
You also need a URL destination for mobile users. Copy and paste those URLs in the appropriate text fields.
All you have to do now is click “Create.” You can edit or delete the CTA at a later date.
Instagram Call-to-Action Button Options
You can also add call-to-action buttons on your Instagram account as long as you have a business account.
The basic CTA phrase options are Email, Call, Text, and Directions.
You can also choose to use a CTA like Reserve, Book Tickets, or Start Order.
These relatively new additions to Instagram’s playbook give you more control over how your followers interact with your page.
How to Add a Call-to-Action Button on WordPress
If you’re using a WordPress installation for your website, adding a call-to-action button is super simple. You can use a third-party app, your theme’s built-in CTA creator, or a plugin.
WordPress Calls to Action is a good plugin.
Simply install it on your WordPress site and configure it however you’d like.
Start Using Crazy Egg Tools to Improve Your Call-to-Action Button Effectiveness
You can follow all the tips in the world and apply what you know about your audience, but call-to-action buttons don’t always perform well right out of the gate.
Testing your CTAs will make them more effective. The more you test, the more data you have at your disposal.
Crazy Egg allows you to A/B test your landing pages and other website pages based on the changes you make to your call-to-action buttons.
There are no shortcuts to success when it comes to your call-to-action button.
There’s no right color, size, image, or text that will improve conversions.
And there’s no one trick that will guarantee your conversions increase immediately.
This is a process that takes time.
But if you follow the advice in this post, you’ll be one step closer to a better conversion rate and a stronger brand.
You’ll discover new ways that you can optimize elements like color, design, size, and copy.
Then you can go find the right place to put your button that creates urgency and pushes your audience to the next step on the path.
And you’ll be equipped to test every change you make to see if you really get the results you’re looking for.
There is no formula, but that’s not the end of the world.
Crazy Egg can help. Sign up for our email list to learn about all the new developments available through the Crazy Egg tool.
And when you choose the elements that fit your niche and audience, you’ll be glad you went through the effort it takes to successfully create a powerful call to action button.
How do you optimize your call-to-action buttons?