6 Factors Everyone Should Know About Designing Call To Action Buttons

by 18 12/12/2011

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.


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.

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.
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.

The call-to-action for this app clearly differentiates itself from the background through a highly saturated button. Would you miss it?
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.
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. 
The language on the call-to-action for Intrahost is simple and direct, letting the user get straight to work.
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.
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.


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?

About 

Stephanie Hamilton is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

18 COMMENTS

Tim Watson

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.

December 12, 2011 Reply

Aman Anderson

This is great!

January 5, 2012 Reply

Bambi Corro III

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

January 16, 2012 Reply

Philip Tomlinson

I really love that one of the common themes in this post. Many of the call the action buttons chosen have an arrow guiding the user’s click. We’ve done a very similar thing with the beta version of Jobbook.com, but we noticed that we have been getting more new members using a clear sign-in form directly on our front-page.

In other words, everything you wrote is good. I just don’t recommend arrows!

April 17, 2012 Reply

Cairn Emmerson

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

May 3, 2012 Reply

Sarmista Aun

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.

March 15, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization, design and copywriting articles FREE >>>