6 Factors Everyone Should Know About Designing Call To Action Buttons

by Stephanie Hamilton

Last updated on February 26th, 2018

This is where the rubber meets the road.

How well do your call-to-action buttons convert website traffic into something that benefits your business?

Web and UX designers know the importance effective call-to-action buttons, but the following six factors should be understood by anyone involved in generating business from your website.

What Are Call-to-Action Buttons?

Call-to-action buttons solicit action from a website visitor.

Commonly a clicking action that may link to a download, signup, or sale. They may also lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.

6 Factors of Call-To-Action Button Design

1. Size

Ideally, your call-to-action button should strike a healthy mix between overcrowding the page and fading into the background. It should be the largest button on the page because the larger the element on the page, the more we understand its importance.

Download NCover
The call-to-actions on the website NCover are given prominence through increased size. They also supply ample room to house critical information, such as a ’21-day Free Trial.’ A contrasting color also helps differentiate the download button from the background.

2. Positioning

Placing the call-to-action button above the fold of the web page is most effective as this area is the first impression one has of a business. Social Shopping

Users are greeted with a centrally-located call-to-action button on the landing page of Store Envy. The round button stands out with its thick white border and encourages both shoppers and sellers to join after reading the accompanying text.War Child
A ‘Donate’ button serves as the call-to-action for War Child. Placed as secondary to the heading, it elicits action and is placed strategically above the fold, encouraging users to come back after they checked out the rest of the site.

3. Color

Make your call-to-action stand by designing in a contrasting color to the background. This ensures users notice it and increases the likelihood of taking action. Also consider how well the color fits in with your color palette and aim to subdue the color the larger the button gets.Analog app

The call-to-action for this app clearly differentiates itself from the background through a highly saturated button. Would you miss it?hiring hassle
The Resumator uses complimentary colors on the navigation to emphasize the “Sign-Up” call-to-action button placed there. The same familiar red color is used on the call-to-action to “Start the Tour.”  Notice how the complimentary color pops the button from the background.

4. Whitespace

Whitespace is also an important element in giving your call-to-action the attention it deserves. This tactic is effective if your button color is subdued and/or small.   This tactic instantly commands attention because adjacent elements are spaced further apart.mint themes
While subdued and not shouting for our attention, the call-to-action buttons on the website for Mint Themes still inspire action and draw our attention through the use of whitespace both above and below the call-to-action buttons.
The clean, minimal website for Blaz Robar enables the call-to-action plenty of breathing room.  This button doesn’t have to work extra hard to compete for out attention.

5. Language

Language plays a huge effect on conversion.

Strive for simple, clear language that inspires users to take action. Do you feel more compelled by a button that reads “Buy Now” or “Add to Cart.” Also, if the user has to question what the wording means it can mean less conversions.  intrahost
The language on the call-to-action for Intrahost is simple and direct, letting the user get straight to work.commendable
Commendable Kids calls you to “Get Started Now” and informs you the account is free. This information is useful and prevents the user from having to dig deeper into the website to find this out.

6. Benefit

We tend to respond quickly when we feel like we can miss out on an opportunity. Incorporate bold, commanding words into your buttons that communicate the benefit. fileshare hq
The call-to-action button for FileShare HQ lets you know of the perk of becoming a member – the ability to send files instantly within minutes.

unlimited access
By letting the user know the deal they are getting, the call-to-action for Apps Templates creates an incentive to join the club now to take advantage of it.

Call to Action buttons play an important role in your businesses conversions. While every website’s goals are unique, designing your call-to-actions to elicit action through a mix of the above techniques will have a positive impact on your website conversions.

What are your thoughts?  What other factors do you consider when designing call-to-action buttons?



Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.


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.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Anonymous says:
    July 4, 2016 at 3:18 pm

    If you would like to take a good deal from this post then you have to apply these
    methods to your own web site.

  2. Sarmista Aun says:
    March 15, 2013 at 7:29 am

    Hi Stephanie,
    Thanks for sharing this useful post. While inserting CTA it is really important to consider the 6 factors which you have listed above. CTA plays a vital role by insisting the visitors to take desired actions.

  3. Cairn Emmerson says:
    May 3, 2012 at 8:51 am

    Nice to see our website listed (www.intrahost.co.uk). Many thanks.

    • Russ Henneberry says:
      May 3, 2012 at 10:16 am

      Thanks for stopping by Cairn!

  4. Bambi Corro III says:
    January 16, 2012 at 10:06 pm

    thanks for these tips as i am currently designing a landing page!

  5. Aman Anderson says:
    January 5, 2012 at 6:21 pm

    This is great!

  6. Tim Watson says:
    December 12, 2011 at 11:50 am

    Great run down on the key button factors.

    I looked recently at common practice for top eTailers to get email subscribers and there is plenty of opportunity to improve sign up forms, here is the analysis of call to action text and suggestions of improvements.

    • Stephanie Hamilton says:
      January 17, 2012 at 10:41 am

      Thanks! Glad this information is useful for you!

Show Me My Heatmap

Click tracking, heat maps, and without a spreadsheet? Yes, please. is one solut...

Aimee Graeber


What makes people leave your website?