17 Best Practices for Crazy-Effective Call-To-Action Buttons

22

What Is A Call-To-Action Button?

Call-to-action (CTA) buttons are the buttons you use in your website and on your landing pages to guide users towards your goal conversion. It's the part of the landing page that the user needs to click in order to take the action you want them to take. CTA buttons can vary in style and size depending on your goal conversion and website style. Some common examples of call-to-action buttons are:

  • Add to cart buttons
  • Free trial sign-up buttons
  • Download buttons

CTA buttons have a very specific goal: to get your web visitor clicking and completing a conversion. Today we'll be discussing 17 call-to-action button best practices to help you get the most clicks out of your beautiful buttons.

1. Use Action-Packed Text. Call to action buttons should feature striking, action-oriented text. Substitute boring words like “submit” and “enter” for more action packed words like “get,” “reserve,” and “try.” Your action words should go along with specific text relating to your offer like:

  • Try Our Free Trial
  • Reserve Your Seat
  • Download Whitepaper

Udemy’s “Take This Course” button text gives a a great offer-related action. 

udemy cta

 The Children’s Museum of Pittsburgh has a nice site design, but their button text could be better. Instead of boring “Go,” why not try “Book An Event” ?

optimize cta buttons

2. The Colors Duke, The Colors. Your button color matters. It matter a lot. In fact, if you’re going to take only one tiny single piece of advice from this post, it should be to give careful consideration to your button colors.

#ThingsOnly90sKidsWillUnderstand

Generally speaking, green and orange buttons are reported to perform best. Ultimately though it will depend on your site design, as contrasting colors work best to make striking buttons that stand out. You wouldn’t want a green CTA button on a green background.

buttons contrasting colors

Green and purple are contrasting colors – plus those dinos are adorable 

If you’re not sure what looks best, run the super sophisticated squint test and see what comes off most appealing. However, if you really want to know what color CTA button will work best on your page, testing is the only way to go!

Check out this cool color psychology infographic from Kiss Metrics when you have the chance. It’s a pretty interesting study on how different colors inspire different emotions!

3. Snazzy Button Shapes. Button shape can also play a big role when attempting to craft the perfect CTA button. You’ll need to consider whether you want to go with a more rounded button shape or a button with square edges. Hard to say what works better here as both style are common and both can perform well in different settings. Ultimately you’ll have to test shapes and see what works best for your biz!

call to action optimization

In ContentVerve’s test, a rounded green button did better than a blue rectangle

4. Large and Legible Text. Your button text should be large enough to read easily, but not so large that it looks obnoxious or intimidating. You want to avoid a “Honey, I Blew Up the Kid” situation.

cta best practices

While it may seem absurd to imply that large text makes people feel anxious or uncomfortable, many users do experience subconscious distaste for threateningly large lettering. Your button text should be big enough to draw attention, but not so big that it completely overwhelms the rest of the content. 

5. Button Text Shouldn’t Go On and On and On. We discussed earlier how it’s good to use specific action-oriented button text. Considering that, it may be tempting to stretch out your button text, but that’d be a bad move. Ideally you’ll want to keep that button text to two or five words.

cta buttons

this CTA button is probably OK, but it’s nearing the red zone

6. Go With 1st Person Speech. Michael Aagard of Content Verve shared a study in which he discovered that changing button text from second person (“get your free template”) to the first person (“get my free template”) resulted in a 90% increase in clicks! See how changing your CTA button to 1st person (putting yourself in your customer's shoes) affects your CTRs.

 

TL;DR: Call to action buttons (done right) can dramatically increase conversions on your website. Get our free guide to learn how to write a killer CTA for website copy, email, banner ads and more --->

 

7. Create a Sense Of Urgency. Constructing a sense of subtle urgency in your call to action buttons can yield some impressive click-through rates. For example, you could use button text like:

  • Sign Up and Get 50% Off Today Only!
  • Download the Build Apps E-Course for $30 $10!

Even just adding “now” builds a subtly sense of urgency for users:

  • Register For The Ultimate PPC Webinar Now!

The example below does a nice job of creating a sense of urgency. My only issue with it is the red X marks – they are there to denote points of information, but to me it looks like they are sold out or cancelled events. That’s a dangerous misinterpretation! 

call to action buttons

8. Keep it Above the Fold. You always want to keep your call to action button above the fold so that users never miss it. As noted in an earlier post about landing page best practices, the important vital information should always be kept above the fold. The additional extra info should stay below the fold, where it remains assessable but not distracting.

9. Natural Hierarchy. Sometimes you’ll have other buttons on your web page that are not your main call-to-action conversion buttons. Those buttons should be less attention-grabbing than your main CTA button. For your non-CTA buttons, try using gray scale buttons or monochromatic colors. Your main call-to-action button should always be the biggest and brightest. 

button colors

Starbucks does a nice job of clarifying their main CTA button while keeping within their color scheme

10. Use Button Copy for Value Proposition. You may notice that many buttons include the word “free,” as in, “Get My Free Ebook.” “Free” is an enticing word, and using that word in button copy emphasizes your offer’s value proposition. Consider your offer’s value proposition and how it might best be displayed in your call-to-action button. 

11. Get Fancy With Button Graphics. In some cases, small arrows or graphics on your CTA button can positively affect click-through-rates. If you’re going to use graphics, make sure that your icons clarify rather than confuse the offer for users. For example, you would want to avoid using a disk download icon for a user who is registering for a webinar.

call to action button graphics

 

12. Bonus Button Text. There are some situations in call-to-action marketing where you may want to consider adding an extra line of information within your button text.

This practice is common with free trial buttons. For example, a free trial button might say “30 day trial, no credit card” in smaller text beneath the main “Start Your Free Trial” button text. This is valuable info that will encourage users to click through to begin their trial.

cta button tips

example from Dashboard

This won’t always be necessary with all buttons, but when it fits, this extra information can help CTRs a lot.

Alternatively, you can put that extra information underneath or beside a button. Copyblogger refers to these elements as “click triggers.” Some examples of click triggers include:

  • Testimonials
  • Anxiety-Suppressing Info (e.g. No credit card required)
  • Key Benefits
  • Data Points (e.g. users see a 40% increase in shares when using X)

best call to action buttons

Example from Social Sprout

13. Cart Call-To-Actions. E-commerce sites will want to spend the most time A/B testing their cart/purchase buttons. Even small adjustments in cart buttons can dramatically affect conversion rates. Be sure to offer buttons for other payment options like PayPal.

Having a PayPal button can be a huge incentive – there have been MANY times ordering food where I’ve been too lazy to fish out a credit card and only move forward by the grace of PayPal.

14. Less is More When it Comes to Choices. Us humans tend to suffer from the choice paradox – we enjoy choosing between an apple or an orange, but present us with apples, oranges, dragon fruit, grapes, pomegranates, bananas, clementine, and mangos and our heads may nearly explode with indecision.

In one study by Mark Lepper of Columbia University, participants who were asked to choose one chocolate from a box of six were happier with their selection than participants who selected one chocolate from a box of 30. Keep your users happy by giving them fewer buttons to choose from!

If you do want to include multiple button choices, give weight to once choice over others to help funnel users towards a specific path. It doesn’t even matter what path really – users just wanted to be guided!

optimize call to actions

Buffer offers several sign-in options, but emphasizes one over the others

15. Follow the Natural User Flow. In Western culture, we read top to down and left to right. Keeping this natural reading flow in mind can help influence smart button placement. Call-to-action buttons placed towards the bottom or to the right of content often outperforms alternative placements.

Most importantly, never force users to backtrack in order to click a button – CTA buttons should appear in appropriate places that align with a user’s experience. For example, you would want to put a “sign up now” button in a spot where a user would find it after reading about your offer or product, not before, as it would make no sense for a user to sign up for an offer they know nothing about!

16. Widen That White Space. Your CTA buttons should always have a healthy chunk of white space surrounding them. White space helps call the users’ attention to your button and helps it stand out.

call to action best practices

This CTA button from Mixbook has plenty of white space

17. Test Buttons Like Your Life Depends On It. Testing with CTA buttons is absolutely vital! If you haven’t done much A/B testing before (tsk tsk), the call-to-action buttons are a great place to start as even small, easy-to-make changes can have dramatic effects. Test placement, color, style, text – if you can think of it, you should test it!

 

Comments

Brian (@bbrian017)
Feb 21, 2015

These are some great examples of having an effective call-to-action buttons. The call-to-action is very important for any online business. They bring in a lot of customers and subscribers.

I also like your idea of 'Less is more'. It's true that when we're given too many choices, we tend to get confused. So, it's better to offer the potential customers a limited number of offers.

Thanks for sharing such valuable information.

Charmaine Ward
Feb 25, 2015

Great ideas but PLEASE fix the typo on number 6 (get you're free template).

Elisa Gabbert
Feb 25, 2015

Sorry about that. :) It's fixed!

Mckenzie
May 05, 2015

I love what you guys are up too. This type of clever work and
exposure! Keep up the very good works guys I've included
you guys to our blogroll.

Austin Homes
Feb 26, 2015

We are trying a CTA button for chatting. I agree keeping it simple. We incorporated the colors of our website. So far it's working nicely.

Sam Caesar
Feb 27, 2015

Great article!

I think you've confused 'mixbook' with the mosaic app in #16?

Brooke
Mar 17, 2015

Hi Megan,
thanks for the insightful article. I completely agree with you - simplifying the call to action is so very helpful with nudging lead conversion, alongside every other step of the lead nurturing process.
If there was anything I was to add to your article, it would be the need to align the CTA with the content. They really need to work in unison to have the desired effect on your leads.

Best wishes and happy blogging,
Brooke

Ashley
Mar 19, 2015

Hi, just wanted to let you know that there is a typo in #6: He changed the pronoun from 2nd to 1st person ("your" to "my"), not the other way around. I hope no one has taken the typo's advice!

Robert Streett
Jun 07, 2015

I really liked the tips and ideas here. Thank you!

Matt Lane
Jun 15, 2015

In point 6, you write "Go With 1st Person Speech ... changing button text from 1st person ... to 2nd person ... resulted in 90% increase in clicks!"

This sounds contradictory. Based on Aagard's study, isn't it "changing button text from *2nd* person ... to *1st* person ... resulted in 90% increase in clicks!"?

Elisa Gabbert
Jun 16, 2015

You're right Matt, that was a mistake! Just fixed it. Switching from "your" to "my" led to the increase in clicks.

belinda
Jul 21, 2015

What code (if any) is used to direct the consumer to register or login? I am very new to this and I have had a lot of problems with this CTA button, it is deriving me around the twist

rubel
Jul 22, 2015

thank you for sharing this..

jammy
Jul 22, 2015

great article.thank you

Gemma
Jan 07, 2016

Testing your click to action buttons regularly ensures that your website is getting the best results possible from your button. One of our customers using live chat software changed their colour of their chat button to a slightly different shade of blue to fit more seamlessly in with their website and changed the wording from "click here" to "click to chat" to explain what the button actually was for. They saw an increase in their visitors engaging with their business, if they had not tested the new button they would have lost out on sales.

Naren
Jan 16, 2016

Excellent. Every Web Designer should have which best practice, which bring common user experience with more hits.

Daniel D. Maurer
Feb 20, 2016

The best point I got out of this fine article is that it's okay to try things and make mistakes. The point is that we're trying! CTA buttons are easy switches to make, as you pointed out.

Thank you for your highly informative article with good info. I'm going now to make some changes on my website!

Peace! - DDM

Baylan Megino
Mar 03, 2016

This is a great list! I'll keep it book marked and also on my Pinterest board for reference. Do you have any suggestions for CTA buttons on videos? Thank you!

Sas
Mar 22, 2016

The three red crosses in the image are the Amsterdam city 'logo'. All dutch people recognize this.

matt
Apr 25, 2016

FYI, on TNW's poster the "x" icons are most-likely cultural - Just search Google, Amsterdam flag.

I admit their designer has done a poor job of displaying this and they do look like "this is not included" icons.

L. Kenny
Jul 05, 2016

Great post! One grammatical mistake, however: #14 should read, "We humans..." instead of "Us humans..."

Steve
Oct 05, 2016

Hi,

Good stuff! Effective information about CTA button which would be helpful for needy. I would recommend this post for CTA button designers.

Thanks

Leave a comment