Call to action buttons are the buttons that you, as a web designer, want all your users to click on when they land on your page. Usually they’ll be a link to a download, signup or sale.
Seth Godin (The Big Red Fez) calls them bananas and your users are the monkeys. The objective is for the monkey to find the banana in less than 3 seconds (before they give up and leave). “Force yourself to design each and every page with one and only one primary objective. That’s the banana. Make it big. Make it blue (or red). Make it obvious.”
This post discusses how to design the perfect ‘call to action’ button and showcases 30 examples of good call to action button designs.
How to design the perfect call to action button
Force yourself to design each and every page with one and only one primary objective.
Your call to action button needs to be obvious and jump out at the user. Here’s 5 characteristics of a good call to action button.
1. Colour
The colour should stand out from the rest of the page, and is therefore usually a brighter, contrasting colour.
2. Location
It should be located where the user would expect to find it easily. Above the fold, beside a product, in the header, top right navigation; it should be obvious and not hard to find.
3. Language
The language you use to communicate with your user is important. It should be short, to the point (no waffling) and should start with an action verb like signup, download, create, try etc.
And give the user a reason to click on your call to action button, ‘free‘ being the number one incentive.
4. Size matters
To make it obvious that it’s your most important button and that you want users to click on it, make it bigger than any other button and give the user as much area as possible to click on.
5. Room to breathe
Your button shouldn’t be overcrowded with other elements. It needs sufficient margins so it can be distinguished and the text needs enough padding so it’s easy to read.
Showcase of good examples of call to action buttons
1. Things
2. Wordpress e-Commerce
3. Skype
4. PB Wiki
5. Exceptional
6. PicsEngine
7. InCase
8. GoodBarry
9. Plan HQ
10. TypePad
11. Mozilla Firefox
12. 37 Signals
13. Hambo Design
14. Cake PHP
15. Traffik
16. Boag World
17. Donor Tools
18. Luke Larsen
19. Square Space
20. Wu Foo
21. Barack Obama
22. Freshbooks
23. Crazy Egg
24. Web Notes
25. Campaign Monitor
26. Light CMS
27. Litmus
28. Stumble Upon
29. Remember The Milk
30. Ekklesia 360
Further reading
- The Big Red Fez Easy read by Seth Godin on how to make your website better
Any other pointers you like to offer or any other good examples you know off, please share them in the comments below.
December 15th, 2008
Andy Sowards says:
Great Article Lee, You really hit the nail on the head with this one. I HATE going to sites that I have every intention of wanting to try out, but I can’t find the “Register” Button if its a service like twitter, or I can’t find the freaking “Download” Button if its a new software. People should definitely heed this advice! Nice collection of call to action buttons as well
This is like a 2 in 1 post! Great job.
December 15th, 2008
Curvball says:
Nice collection Lee. Call to Action elements are vital to good design and in converting users. Some great examples with one of my favourites being Square Space. It sits perfectly within the main navigation.
December 15th, 2008
Ryan Coughlin says:
Great collection Lee, some i have never even seen or heard of and there buttons are nice, its great to see the different ways of putting together a button from site to site.
Nice work!
Ryan
December 16th, 2008
Dan Milward says:
Hi Lee. Thanks for linking to the WordPress e-Commerce Plugin. Our buttons were developed by our friend Nick La from N Design Studio.
Ciao,
Dan
December 16th, 2008
Lee says:
@Andy: Very true, it would be good to hear of any bad examples
@Curvball: Square Space has a great contrast button
@Ryan: Glad you liked it
@Dan: No problem, was recently checking out Wordpress e-Commerce and it’s a fantastic plugin
December 16th, 2008
Steven Hambleton says:
Hi Lee!
Thanks for featuring our site, we are in good company there.
December 16th, 2008
garaj kapısı says:
Hi Lee,
Thanks for this collection.
Garaj Kapısı
December 16th, 2008
Veera says:
The “call” text to “action description” text change is small but it is more usable in the user point of view.
Good post.
December 16th, 2008
Dan says:
Great choices. A shiny call to action button is so much more effective then a boring Click Here text link.
December 16th, 2008
Simon Vallee says:
Useful article – thanks! Some of the best call to action buttons that I’ve seen are from metalabdesign.com’s work.
December 17th, 2008
frank katzer | 1klang.de internetagentur says:
very useful collection of those call-to-action-buttons!
i think webdesigners should reconsider the usual way of desgigning website navigation. those buttons shorten the way to the destination of 95% of the website visitors. the “old-fashioned” navigation gets less important [ i don't say that it's needless ].
December 17th, 2008
David Leonhardt says:
Hi Lee. This is a superb overview of a very small but crucial design element. I like especially the pull-out quote from Seth Godin about deciding on a single goal for a page. Sometimes that s very hard, especially when you know your visitors come for a number of reasons, and especially on the home page where you have to address those multiple interests. Ultimately, the home page of a complex website has a single purpose – triage. That can make it challenging to decide how to handle call-to-action buttons.
December 17th, 2008
Carlos Hermoso says:
Hi,
great post about call to action buttons. I really liked it.
Nice collection of sites using call to action buttons too
December 20th, 2008
Salwa says:
Thanks for the great list!
December 20th, 2008
Outlet says:
Thank you for cool tips. I will think about improving my buttons.
December 21st, 2008
Navdeep says:
Very good collection.
December 21st, 2008
max says:
Hi – thanks for the article – I’ll have it as a reference to design the buttons on a new app I’m launching next month ( http://www.myows.com )
January 3rd, 2009
Farid Hadi says:
Hey Lee,
Interesting topic you chose to write about. Thanks.
January 5th, 2009
Peter Schaefer says:
This has been a very useful blog post.
Thank you,
Lautus Design
January 5th, 2009
David Hamill says:
Nice article Lee. In many cases it should appear both above and below the fold. Take an insurance quote for example. The user should be given the ‘get a quote’ button at the bottom if they’ve been reading all of the policy details.
January 5th, 2009
Sean Landry says:
Great post. I sometimes call these “single action” buttons as well if there is only one action for the user to take on that page. The FireFox page is a great example.
From a usability standpoint most of these examples work well. From a value proposition most of them fail. Too many sites use labels like “Register now” or “Create an account”. Unfortunately these don’t convey value to the user. Alternatively “Connect with friends” and “Start browsing faster” are better value propositions which will convert more users.
January 6th, 2009
Francisco Costa says:
Great compilation of buttons, very inspiring!
January 6th, 2009
DK @ Arnima Design says:
Excellent collection!
Thanks
DK
January 6th, 2009
Website Design says:
Great tips and resources.This is looking so good.
Thank you Sir.
January 6th, 2009
Timothy says:
Wow! Great post! Really useful. And refreshing. I’m used to the same old list-posts, but this one was a good find.
Delicioused
January 6th, 2009
Lee says:
@Sean: Great point. If you can convey what the product is or what the user is getting from clicking on the button then you’re flying. ‘Get a blog now’ or ‘Get a no-obligation quote’ are also good examples of this.
@Everyone: Glad you all enjoyed the post and have found it useful.
January 8th, 2009
hubs says:
lots of copy and pasting of buttons.. err i mean bananas.
January 11th, 2009
preaxz says:
You rock!
Hmm .. I got a lot of idea on how to design my websites from your articles. Great job lee!
January 14th, 2009
Southern California website design says:
I like your action buttons design, I’m impressed with it.
Thank you for the useful tips you’ve shared to us.
-faith-
January 19th, 2009
Miracle Studios web design company says:
I love call action style of “Skype”
January 21st, 2009
geng says:
nice article
January 24th, 2009
Geoserv says:
Great tips, looks like I need to make some for my blog.
January 27th, 2009
ChiangMaiWebDesign says:
Great post, thank you.
January 31st, 2009
Denizli Rehberi says:
Thank you great post
February 2nd, 2009
Mag Studios says:
Hi there so much informative tips for button design and it’s really worked for website design and helpful for Designers.
Thnaks
Mag Studios
February 9th, 2009
www.cyberdesignz.com says:
Hi,
This is a nice post and great thing to learn.
February 12th, 2009
website design Southern California says:
I really like this site. i’m impressed. Your action buttons makes me impress so much. thank you for the post, I always view your site.
-faith-
February 19th, 2009
Laurens says:
Interesting post, thanks! I like the firefox one..size en style!
March 3rd, 2009
add says:
Much of the examples are a little wrong. They have 2 buttons with the same weight so user can’t distinguish a primary action.
March 7th, 2009
mantar bariyer bollard says:
thanks
March 20th, 2009
Listorbit says:
very interesting web analytics tools are superb.
April 8th, 2009
Karel Zeman says:
You have select a very unique topic. People usually don’t pay any attention to it. We usually pay attention to design and interface. Thanks for nice collections of buttons. This will helps us web designer like me.
April 28th, 2009
Shiju Alex says:
Good collection.
Typography could also be a parameter.
By the way, has anyone felt that those ‘Sign up now’ and ‘create an account’ buttons on Google services can be greatly improved?
April 29th, 2009
Eugenio Grigolon says:
Wow! Nice work Lee, thanks for sharing this with us!
May 5th, 2009
Ronnie Roper says:
This is often overlooked by most websites, not the good websites. Its amazing to me how many people have such bad calls to action, or lack there of. Thank you for putting this list together.
May 22nd, 2009
Judd Exley says:
Awesome post and I the only thing that I love more than you listing out some examples and showing a snippet is that I KNOW two of those guys! One’s a kiwi and the other Aussie and I think it’s totally cool that they made it on such a distinguished list.
Good stuff though, I’m keeping this link and showing it to client’s from now on when they ask me about why their conversions are low.
Cheers!
May 24th, 2009
Dan Milward says:
If I’m the Kiwi… who is the Ausie?
May 25th, 2009
Website Design Company says:
Great Post. Call to action button is the weapon to sell the products / services. This post really guide the web developers to make the things clear. Thanks
June 15th, 2009
TraiaN says:
Lee,
This is an awesome collection of call to action buttons. These kind of buttons have a strong impact on people actions on web pages.
Although not directly related to the design, I have wrote a post about a technique, called dynamic text on call to action buttons which some of your blog readers will find it useful. Cheers.
August 13th, 2009
Nycteris says:
What a great article! Thanks!
August 14th, 2009
Dallas Web Design says:
Making the important stuff easy to find in any web design is often over looked by designers focusing more on look than function. I mean a website has a purpose for most and designing it to achieve the best results for that purpose are very important. Anyway good stuff and thanks for the read!
August 31st, 2009
Jack says:
I personally like the Firefox on. Yes it seems to be bigger than the rest but it has the perfect balance between advertisement and information.
Have you noticed it seems to be all about the rounded corners?
Great list you have Lee,
Thanks again.
November 2nd, 2009
Jonathan Roye says:
This is a great article.
November 3rd, 2009
john says:
Getting a great buzz from this list – fair dues Lee
November 28th, 2009
Ben says:
Hi,
Interesting post – thanks! I run a bespoke website design and development copmpany and will take your comments on board!
Ben
December 2nd, 2009
Karen says:
Thank you for the ideas. I was looking for “buy now” icons for one of my sites, and I came to your site through “smashing magazine”. I got a lot more ideas from reading your post, and can clearly see how I can choose a more interractive and eye catching “call to action” button than I had originally planned on. Thanks again.
December 7th, 2009
Elijah says:
great article, i’m working on a free quote button to place on my site, but i just cant find anywhere to place it where it can be effective and still attractive.
December 8th, 2009
Doug says:
most of those button designs are quite boring…
December 10th, 2009
web design philippines says:
Good article though some of the buttons were not that attractive.
December 12th, 2009
rajnish says:
this is amazing concept for all the designers and also it could be a great business generating tool too.so i like it
a href=”http://wwwibowtech.com”>IT provider
December 12th, 2009
JP says:
Weird…out of the 30 examples, 15 of them use green buttons and 10 use orange. Is that a personal preference of yours? ie. the reason you chose them as examples? Or is that just a current trend?
December 17th, 2009
henrylow says:
Small Business owners are largely forgotten. Thats why I only focus on them. I have experience several members of my family file bankruptcy due to small business failures. I also I suffered through 2 destroyed businesses due to failure however, in my failings I have learned some of the secrets to success. (Who can say they know it all?)
onlineuniversalwork
December 20th, 2009
Gary says:
I found this blog when searching for call for action websites and was greatly surprised with the effort you put in to this! Thanks for the help. It not just about pretty websites but ROI of your marketing dollars.
January 11th, 2010
Dale Berkebile says:
This is a great selection and resource of different Call to Action Buttons. Being that this is an important part of converting customers to leads it is good to have a better understanding of what people are doing and what is working. Thanks for posting this.
January 14th, 2010
Sherwin Shine says:
Hi
Nice article and Great collection Lee. I find this article very useful. These call to Action Buttons really works in converting customers.
Sherwin
January 30th, 2010
Veteran Biler says:
The color and size is probably the most important factor here. And the “keep it simple”-princip. I wouldn’t like to press a button with to many words in it. You must know what you’re clicking on without reading too many words.
February 26th, 2010
Riley S. says:
Thanks for the collection of call to action buttons. Unfortunately, a lot of them seem to use muted colors that don’t draw enough attention. I’d be curious to see how well they stand out on their respective web pages.
March 8th, 2010
agence web annecy says:
Great post with many examples, will be useful to ensure my next conversion rate, thx a lot