How to Create Killer a CTA Button, Part 1:

So you’ve got an awesome offer and lots of epic content to support it. Now all you need is a high converting CTA button to get those conversions rolling in.

But how exactly do you create a call to action (CTA) button that gets your website visitors to take the action you want them to?

Should you just stick a basic “Sign up” or “Buy” button on your web page and hope for the best?

Absolutely not, and here’s why:

A call-to-action(CTA) is a collection of words with only one goal – to get your readers or potential customers to take a specific desired action. This action could be anything; You might want them to sign up for your webinar, opt-in to your email list, or buy your product.

Whatever you want them to do, there’s only one way to ensure that they take that step: Use an effective CTA.

That’s why, in this two-part series, I’m going to give you an in-depth look at how CTAs can help you get results and how to craft the perfect one to boost conversions for your business.

Benefits of an Effective CTA:

While your other marketing efforts have helped you get potential customers to your site or landing page, it’s the CTA that’s going to get them to do what you need them to next.

Think I’m overstating CTAs’ importance a tad?

Check out these stats:

  • More than 90% of visitors who read your headline will also read your CTA.(Unbounce)
  • Adding CTA buttons to article templates boosted revenue by 83% in just one month, according to Brafton.(Brafton)
  • Simply adding a CTA to your Facebook page can increase your click through rates by 285%!(AdRoll)

Pretty powerful stuff, right?

A weak CTA on the other hand can mess up a perfectly good conversion process.

Target customers may land on your site and like what they see, but end up leaving because of an insufficient push in the right direction.

This one mistake could end up wasting all of your other marketing efforts. Obviously not what you want.

So how can you avoid this?

I’m going to go through seven easy tips to help you craft a killer CTA that converts like crazy.

Tip #1: Make Your CTA an Actual Button:

Want clicks? Make your CTA a button then! In all seriousness, there are probably a hundred different formats you could present your CTA in, but the trusty button is best.

Humans are creatures of habit. We’re already subconsciously primed to view buttons as elements that should be clicked, so when your visitors see a button-shaped CTA, they’re far more likely to click on it.

Don’t be swayed by all the creative crazy shapes and formats out there(we’re looking at you, websites with triangle-shaped CTAs!).

Opt for a traditional button-shaped CTA instead and watch your conversions go up.

But which CTA button shape works best?

While you’ll sometimes see a square or circular CTA button, the fact that they’re pretty rare makes it harder for visitors to recognize them as CTAs.

Most CTA buttons are rectangular with either squared off or rounded edges.

So which style should you use?

Although there’s no hard and fast rule about this, some UX experts argue that rounded edges work best.

That’s because

A)We’re more familiar with rounder shapes as buttons, making us all more likely to click a rounded-edged rectangle CTA button.

and

B)Square edges tend to draw the eye away from the center of the button, while rounded edges pull them inwards, towards the center of your CTA.

This increases the chances that potential customers will read and click on your CTA.

Actionable Steps:

-Try out both square-edged and rounded rectangular CTAs on your site. Do an A/B test and figure out which one is converting best for you.

-Also, keep in mind that there are varying degrees of roundness, so even rounding your button’s corners a little can make it stand out more as a button to your visitors.

In this example from Neil Patel’s website, you can see he’s gone for a more square-edge rectangular CTA button, but if you look closely, you’ll notice that the corners are slightly rounded.

Tip #2: Make your CTA Button Look Clickable:   

This tip follows naturally from tip number one. It’s not enough to slap a button on your page. To get more clicks, you’ve got to do everything possible to ensure your visitors instantly recognize your CTA as a clickable button.

Adding design elements like a drop shadow, 3-D effects, or making your CTA change color when hovered over lets visitors know “Hey, I’m clickable, click me.”

Making your button look clickable is even more important when it comes to users on mobile devices.

Your desktop visitors can easily hover over any button to check whether it’s clickable or not.

But mobile visitors can’t.

So the more obvious you can make it that your CTA should be clicked on, the better.

This eliminates any doubt and funnels more visitors towards taking the exact action you want them to.

Actionable Steps:

-Add design elements like slightly rounded corners, gradients, and shadows to send a clear message to your visitors that your CTA is a clickable button.

-Make sure your CTA button has enough white space around it. If it’s crammed in among a lot of words or other elements, it won’t stand out as a button.

– Stay consistent: Apply these same design elements to all the CTA buttons across your website, so that your visitors can quickly recognize them.

Look at these examples from Neil Patel:

This is the landing page for his Ubersuggest tool:

And this is the landing page for his SEO Analyzer tool:

Notice how the buttons in both examples are styled similarly. This lets a visitor navigating from one page to another know right off the bat when they see a button.

Tip #3: Create a Bigger CTA:

Now this one might seem like a total no-brainer.

But how many times have you landed on a website, all ready to make a purchase, and had a hard time figuring out how to do just that?

One of the most common mistakes I see businesses making is going for small, subtle, barely-there CTAs.

This is a bad move all around.

If you make it hard for potential customers to take you up on your offer, they won’t. Forcing your site visitors to  try to figure out how to take the next step is a guaranteed way to break the flow of the buying process and send them fleeing to your competitor’s site.

Small CTAs are also harder to click for viewers on mobile devices. In fact, the average CTA button is now 47.9 pixels tall.  According to Google, any clickable element (including CTA buttons) should be at least 48 pixels tall for the average finger to press it on a mobile device.

If your CTA button is much smaller, mobile visitors may struggle to click it and end up giving up on your offer altogether.

So what should do instead? Go bold. Make your CTA button big, clear, easy-to-click and unmistakable.   

 Actionable steps:

-Make your CTA button at least 48 pixels tall, for easy clicking.

-Ensure that your CTA button is large enough to grab attention.

-Choose a text font size big enough to make your CTA easily readable and instantly understandable.

-If you have more than one CTA button on the same page, make your primary CTA bigger than your secondary CTA.

Your primary CTA is the CTA for the action you most want your visitors to take, while your secondary CTA is for the action you want visitors to take but that isn’t as important as the first action.

For example, if you have a software company, your primary CTA might be asking visitors to sign up for a paid account, while your secondary CTA might be offering them a tour of the software. You probably want them to sign up for the paid account more than you want them to take the tour.

So make the CTA button for the action you most want visitors to take bigger, and the secondary CTA (if you have one) smaller.

Check out this great example from Chargebee:

Notice how the large orange primary CTA button asking visitors to “Sign up” is a lot larger, more noticeable, and more clickable than the secondary CTA for “Schedule a demo”.

Clearly, it’s more important for visitors to sign up than to schedule a demo.

Also, the primary CTA is an actual button, while the less-important CTA is just a clickable link.

This directs your site’s visitors and helps ensure they take the action you most want them to.

Tip #4: Pick a High Contrasting CTA Color:

Wondering what the best color for your CTA button is? A quick Google search will show you tons of articles arguing that red CTA buttons work best, or that orange buttons boost conversions.

The truth?

It totally depends on your site and your target audience.

While orange or red may convert better for a lot of sites, if they don’t flow well with your site’s color scheme or translate well to your potential customers, they’re not the right shades for you.

But although there’s no one ideal CTA button color for every business, there is one thing that matters most when choosing your CTA’s color:

Contrast.

When it comes to picking the perfect CTA button color, it’s essential to ensure it stands out from the colors around it.

The worst thing you can do is craft awesome CTA copy, find the perfect place to put your button, and  then choose a color that completely fades into the background.

Think about all those “Big Sale” signs  at the mall.

They don’t usually come in subtle, neutral shades, right?

That’s because to get a potential customer to take action, you’ve got to get their attention first.

So if you’ve got a dark purple landing page and a navy blue CTA button, you’re probably missing out on a lot of conversions, just because of a lack of visibility.

Simply changing that CTA button to a higher contrast color like light green or deep yellow would likely boost conversions.

Got a large amount of white space on your landing page? You’re in luck! Anything from a bright orange to a blue button would stand out and help you grab buyers’ attention.

Keep in mind, colors don’t necessarily have to be garish or super-bright to pop.

Check out this gorgeous example from MailChimp’s landing page.

While the blue is a softer shade, it’s positioned against a white background, so it still draws your attention:

 Actionable Steps:   

-Go for maximum contrast. Think a blue button against your yellow background, or a deep red against white.

A brightly colored CTA button will also pop really well against a moodier or more monochromatic background, like Moz’s landing page:

-Keep in mind that going for contrast doesn’t mean you can’t use your brand’s main colors on your CTA button.  It’s actually a smart move to create important CTA buttons in your brand’s primary shade, as this creates a polished, professional feel.

Just make sure that the color of the area around your CTA button contrasts strongly with it.

Take for instance Quick Sprout’s super-effective CTA:

Here you can see that the page and the CTA button are both in Quick Sprout’s signature green. But the area directly surrounding the CTA  button is white, allowing the green button to contrast and be very noticeable.

-Make sure your text color is easy to read against your CTA color.(White letters on deep green work well but white letters on a yellow background don’t, for example.)

-Run A/B tests to find out which color combos appeal to your specific audience the most.

The Wrap-Up:

So far, we’ve looked at how to boost your CTA button’s effectiveness by:

-Making it look like an actual button

-Making it look more clickable

-Making it large enough to grab your potential customers’ attention

-And choosing a high contrast color for maximum visibility

These four tips alone would be enough to supercharge your call to action and bring in more clicks, but we’re not stopping here.

In the second part of this two-part CTA series, you’ll find out how to make your CTA buttons really convert like crazy with a few simple tweaks.

We’ll look at how to pick the perfect placement for your CTA buttons, which power words you can use to persuade your target customers to click, and one simple CTA trick that increased a company’s conversion rate by 232%.  

Have any questions on how to create a high converting CTA button? Let me know down below!