25 Examples of Convincing Call-to-Action Buttons

by on 24th February 2010 with 93 Comments

Despite what many people will tell you, there are no hard-and-fast rules when it comes to call-to-action buttons. Yes, it’s true that large, colorful buttons, surrounded by plenty of space are usually the most successful, but it’s important that you tailor each button to the primary task of the web page in question, whether it’s to Signup, Checkout, Register or anything else. As a designer, it’s your job to make it as easy as possible for visitors to achieve these tasks and call-to-action buttons are the most powerful tools at your disposal, so use them wisely.

Generally speaking, call-to-action buttons should be simple and clear. They must stand out and grab a user’s attention. Everything must be carefully considered, from the trigger words used to colors, sizes, shapes and positioning. These buttons must be highly visible, but not so garish that they render your site ugly or unbalanced.

Below, we take a closer look at 25 of the most convincing call-to-action buttons found on the web. We examine why each individual button is so successful. Hopefully, they’ll give you an idea of some basic does and don’ts and help inspire your own designs.

1. WordPress e-Commerce

screenshot

It’s important to let your button stand out by using color. If you can choose a color which ties in with your site’s palette, like this one, the results are all the more attractive.

2. Skype

screenshot

This “Download now” button is pretty simple. It’s not particularly large or brightly colored. It is, however, surrounded by plenty of white space, which makes it even more noticeable to users.

3. Picsengine

screenshot

Picsengine relies on placement for the success of its “See in action” button. The button’s stuck right in the middle of the page, with no other distracting text, links or buttons surrounding it.

4. Mozilla Firefox

screenshot

The Mozilla Firefox “Free Download” button has stimulated much debate. Most people, myself included, believe that its large, irregularly shaped, vividly colored design is truly revolutionary in terms of call-to-action graphics. A small minority, however, argue that it’s confusing and doesn’t resemble a button at all.

5. CakePHP

screenshot

CakePHP’s “Download” button has been created with large size and unusual shape in mind. Its clarity, however, has not come at the expense of overall site aesthetic. It sits comfortably into the background thanks to its matching color scheme.

6. Crazyegg

screenshot

Crazyegg has designed its site around its call-to-action button, which sits proudly in the middle of the homepage, surrounded by plenty of white space. Its bright yellow color is mirrored only by the other call-to-action button on the page – the much smaller “Sign In” button in the top right.

7. Litmus

screenshot

Litmus hasn’t gone overboard with its call-to-action button; nevertheless it’s very clear, thanks in large part to the empty space surrounding it and its rounded shape, which isn’t echoed anywhere else on the page.

8. StumbleUpon

screenshot

Having one primary function objective per page makes it easier for users to locate call-to-action buttons, but sometimes this just isn’t possible. There’s loads to click on the StumbleUpon homepage, but the “Start Stumbling” button really stands out, thanks to its use of color in an otherwise monotone setting

9. Remember the Milk

screenshot

Remember the Milk offers visitors several options on its homepage, but the most important one- “Signup Now!”- is by far the clearest, positioned in the middle of the page, surrounded by a colored box and capitalized. No need for gaudy, bright colors here.

10. Lifetree Creative

screenshot

Lifetree Creative has managed to make its call-to-action button really big, even bigger than the company logo, without making the page appear unbalanced. Color, shape, size and space have been used to great effect here.

11. Dailymile

screenshot

Dailymile has done something rather unusual with its call-to-action button. It’s laid out on top of everything else on the page, with a subtle drop-shadow behind it. Helped also by the fact that it’s green, the button really sticks out.

12. Carsonified

screenshot

Carsonified’s homepage contains lots of information, nevertheless, the “Buy Your Tickets” button shines through, thanks to its use of capitals and color. The white letters stand out really well against the red.

13. planHQ

screenshot

PlanHQ has used the power of white space to accentuate its call-to-action buttons. Neither brightly colored nor oversized, these buttons are clear thanks to the blocks of white they sit in.

14. Things

screenshot

Things has two call-to-action buttons on its homepage, both of which are of similar importance to the company. For this reason, they are an identical shape, size and color, but both stand out well against the light blue and grey.

15. Livestream

screenshot

Red is an excellent color to use when you want to draw attention to something. It stands out best against a black and white background, like the one used on Livestream’s homepage. The arrow shape of the “Broadcast Now” button, in the top right corner, urges users to click forward.

16. Ncover

screenshot

Ncover is yet another site with two call-to-action buttons on its homepage. By using the color green against a blue background, Ncover has managed to prioritize one more important button over the other.

17. Dashboard

screenshot

Red against a black and white background features again here. Besides its color, Dashboard’s “Try it Free!” button is highly visible thanks to its size, which offers enough room for the logo and “Sign up in 60 secs” to be included.

18. Free People

screenshot

This page might look rather standard, but you’d be surprised at how many e-commerce sites get it wrong when it comes to their “add to cart/basket” buttons. Free People’s button is obvious without being ungainly, thanks to its color and large but modest size.

19. ClickFormant

screenshot

Usually, it’s best to use industry-standard trigger words for call-to-action buttons. For a mailing list, the button should normally read “Signup” or “Join”. Occasionally, however, varying these words can really add to a company’s brand image. This is what ClickFormant has done by using the word “Inform”.

20. Kalculator

screenshot

Large, over-sized call-to-action buttons are often very successful, but can look ugly and, at times, a bit desperate. Aware of this, Koombea has used positioning, color, space and shape, rather than size, to make its button shine.

21. Basecamp

screenshot

Basecamp is run by a very intelligent bunch, so it comes as no surprise that its call-to-action button is every bit as clever. Many sites make the mistake of positioning a button at the top of the page, which is great, until the user scrolls down and it’s obscured. Basecamp’s button appears twice: once at the top and again at the bottom.

22. Spotify

screenshot

Spotify’s “Buy now” button is a prime example of how best to use color and space. Bright-green and surrounded by whiteness, the button is evident to all.

23. Dropbox

screenshot

Dropbox’s homepage layout is every bit as logical and simple as Dropbox itself (a fantastic tool, which you really should try if you haven’t already!) Visitors are under no illusions as to what they should be doing here. They can either “Watch a Video” or “Download Dropbox”- it’s as simple as that.

24. 280 Slides

screenshot

The “Try it now…” button at 280 Slides is big…really big! There’s no way that a visitor can miss it. It is blue, the same color as the background, so doesn’t look as unsightly as it easily could.

25. FlockDraw

screenshot

FlockDraw’s “Start Drawing” button is one of the most attractive in this list. Besides its great color, which marks it out from the muted background, it’s subtly illuminated and underlined with multicolored brushstrokes.

Conclusion

If one type of call-to-action button was more successful than any other, you can be sure that every website would be using it. While it’s possible to identify similarities between the buttons above, there are clearly lots of differences too. It’s vital that you test different combinations of call-to-action buttons on your site, to see how each one affects conversion rates. You can do this easily using Google Website Optimizer. Whatever your call-to-action buttons look like, however, make sure that they fit your overall website design.

Comments & Discussion

93 Comments

Comments & Discussion

93 Comments

  1. Awesome roundup. I like the Firefox button Sure it seems to be bigger than the rest but it has the perfect balance between advt. and information.

  2. Fantastic. I think the most successful buttons listed here are the ones that use a unique color, set apart from the rest of the theme, combined with a unique visual treatment in distinction from the rest of the theme as well.

    One of my favorites is over at:

    http://themehybrid.com/

    The big, simple, bold confidence of the join button is a psychological factor that helped convince me to give Hybrid, a WordPress theme framework, a try.

  3. Seba says:

    Very nice examples! As Amberly I love Firefox download button too.

  4. Carl Bebridge says:

    Fantastic list. I also love the ones over at http://www.campaignmonitor.com/ and http://moneysuccessnetwork.com/

  5. Quite amazing the difference between each button. It should be a good idea to follow a users test session and get the stats.

  6. Dan says:

    Agree with douglas. The contrast of the button against the background is what makes it stand out.

  7. Alan Takushi says:

    The FF button is a bit busy. But, in regards to the context of the page, it works perfectly.

  8. Jauhari says:

    Incredible list… I like it…
    Crazyegg too simple for me ;)

  9. Tom Batey says:

    Great list, I have signed up to a lot of these services in apps, so nearly all of them make you want to click on them.

    Lots of space around the button, contrasting colours between the button and the background, button placed in logical places so your eye is naturally drawn in that direction, nice button styles and only 1 main call to action on the page – all help to make it stand out and become more clickable that it otherwise might have been.

  10. kazumissimi says:

    Great list.

    To design effective buttons, I always take time to design.

    Thanks for making this.

  11. Nice… This one is so much usefull for me…

  12. Mark Dayley says:

    Great List. Seems like they all have a couple things in common. The buttons all have space around them, and the content leads you to the button.

    Allot of these sites have great services as well. I recognized most of them.

  13. Raheel says:

    What about WordPress Ecommerce thingy?

  14. Retro Sweets says:

    Agree with Mark Dayley, they are all very similar (and they are all very good) which hints at this being the way forward?

    Bold, clear, stand-out from page content, considerate use of colour (notice few reds)… something to bear in mind I’m sure.

  15. Very interesting. I’ve been looking for something like this for a long time.

    Sometimes you don’t know how to make some elements call for attention and the answer is pretty simple.

    Thanks so much

  16. Nice round up! I am reading “Visual Thinking for Design” by Colin Ware right now and it has given me great insight into how our brains are wired to pick up visual cues (colour, shape, textue, cognitve affordances, etc.) that we use constantly in UX design — very informative read for anyone designing in a visual medium.

  17. Adrian Hodge says:

    Great collection there. Fantastic examples and plenty of inspiration there. Thanks for putting it together!

  18. Nina says:

    Great stuff you have here.
    Very helpful :)

  19. ocube says:

    Love the Firefox one most. Thanks for this…

  20. With a hippo! style hat on I’m 50\50 on some of the designs above so it would be great to see some user metrics on these… and how they have A\B tested against others.

    The approach at mailchip.com looks good, three CTA buttons strategically place at the top, midway and bottom of the page.

    http://www.mailchimp.com/

  21. Great List and Examples,

    Ive also noted from “split testing” different landing page layouts – I get nearly twice the conversions if the call to action buttons are:

    1. Either Bright Green / Yellow-Orange
    2. Black or White Bold Text
    3. Include Psychological Arrows .. >>
    4. The Button appears above the page fold
    5. Includes a Graphic / Logo / Icon
    6. Includes some kind of shine, animation – usually mouse/finger pointer
    7. The Button appears twice on the page or at least anchored from a Text Jump link further down the page.
    8. The background behind the button is un-textured and light in color.

    I`ve also noted web-marketers using (multiple) huge red arrows pointing to the optin/signup button …. and sometime even “circuling” the button in a handwritten red font.

    Ive tested this too and it works like gangbusters – 100% increase in visitor conversions almost every time for me.

    … and here is another thing – especially around “optin”, “sign-up” or “order-buttons” … include pictures of PEOPLE, Features or Benifits of the action.

    Another good thing to also include (especially if the visitor is un-familiar with your site) is a secure-site seal, privacy policy/link, or other association logo vith verifiable links (that open in a new window)to click on.

    —-

    Of course – what works on one site, may not work on another site .. .so the old saying goes >> SPLIT TEST ..again and again … its the difference between making 100k & 200k with the same amount of visitors !

    Best Regards,

    - Jamie Dunne
    http://jamiedunne.com

    PS- Nice blog here.. keep up the good work.

  22. malique says:

    basecamp gets my vote

  23. Karina Hogan says:

    Great distinctions Lisa – interesting that none of those above have the obvious Click Here for xxx.
    Think the test and measure is the best way to go, maybe some split tests would the the way to go with one change at a time, eg, color, wording etc. Thx

  24. Lyndi says:

    These are excellent examples. When working with an action button I raise an eye brow when I am asked to incorporate long pieces of copy. Yet, a lot of these examples were able to have more than the one word “Download” and still be very actionable. Great gallery! Thanks.

  25. Alpesh says:

    Look and feel of the CTA tab is depending upon the website, it should be clear & loud enough to appeal the visitors for next course of action.

  26. Alex Sysoef says:

    Great list, I always believed that clear call to action has a huge importance on the web. People have very short attention span and get the message through is extremely important, this round up just gave me some ideas.

  27. Alex sysoef, i agree with u… clear call to action has a huge importance on the web

  28. Crystal says:

    Great examples of convincing calls to action.

    Remember the Milk – that’s a great site! Just signed up for it.

  29. Very cool and unique collection. These call to action buttons are not only for directing visitors to click but will definitely convert them to end use :) I have tried and it proved to increase my conversion where as previously we have seowise text and light button but now really amazing to look at.

  30. David Cancel says:

    Tom-great post!

    We at Performable recently created a site you might be interested in that helps folks create Conversion Buttons. It’s called Super Conversion Button (http://www.superconversionbutton.com/). Would love your feedback.

    Cheers,
    David

  31. going to use this for my new design, cheers :)

  32. Bonita says:

    Thank you for this! I’ve been researching effective button designs specifically for call-to-actions, and this is perfect information for what I need. This will definitely help with the website design I’m currently working on! :D :D

  33. Thanks this is article. Very useful

  34. Thanks for this article. Very useful

  35. Great post. Great Collection. Great Feedbacks too.

    I like the idea to make the buttons distinguishable so they are easy to find and grabs the visitors attention quickly.

  36. Tom says:

    Thanks for your collection. Got inspired to use new call to action buttons.

  37. Great collection

    It would be nice to also see some exceptional examples of ‘contact’ buttons for use below the fold

  38. Pakistan SEO says:

    To design effective buttons, I always take time to design. At it takes a lot of time from me :(

  39. Great article and choice of examples. We always ask our clients to focus on the purpose of the web page or email and limit the amount of choices they give their visitors/recipients. Less choices means less distractions. I like call to action buttons such as the Kalculator example. Button stands out and says everything that the used needs to know.

  40. Ivan says:

    awesome list, loving it!

  41. enjoy your story!happy every day!

  42. he has a heart for us students and wanted to prepare us for the reality of ministry among broken and sinful people.

  43. This is a great source of inspiration, and Jamie D’s comment really listed some very note-worthy techniques!

    I would also like to add that, apart from ‘Carsonified’ and ‘Free People’ whose themes mandate a certain look, the call-to-action buttons are generally made to stand out in the following ways:

    - They have a smooth gradient or glossy look to them, creating the illusion of 3 dimensionalism and making them look tactile

    - A drop shadow is usually added under the whole button or below it, making it look like it is standing on a floor

    - They can also be indented within the page, but the button itself still looks popped out and ‘pushable’

    - The colors imitate or complement the site, when the purpose of the page isn’t to call-to-action. When the whole page is dedicated to call to action, you see more creativity and contrasting involved.

    Also, we mustn’t mistake call-to-action buttons with link buttons people are looking for, like ‘add to cart’ or ‘buy tickets’ buttons. People shopping will be looking for an add-to-cart button, and those going to a popular concert will be looking for the button, so that button’s purpose is just to be noticeable, not to incite people to do something they initially may not have com to the site for, such as registering/signing up, providing personal information, spending money/donating, contacting a business, etc.

    Hope my contribution to the discussion helps!

  44. Thank you for assembling and assessing so many conversion buttons. The whole area of converting interest into action is a challenge for most SMEs and your article (combined with advice/comments you received from others) are like manna from heaven!

    One question – taking on board that 1) there are no rules and 2)colour, button style and space management will all likely count – do you have any observations/ thoughts re the impact of where a call to action button is placed?

  45. webartising says:

    very nice article. Next time try to include http://www.webartising.com/ I’m working on it and I really hope reach the same goal. Tanks.

  46. DesignToads says:

    Any advice for a better term than “submit?” I’m redesigning our CTA’s and I wanted something a little less generic.

  47. Michael says:

    This article is very similar to one on sixrevisions, am I having a deja-vue? Speaking of call-to-action buttons we used one of those services where you place different buttons on different places to see which one has the most effect. This way you know it’s not just you who thinks you have a good call-to-action button.

Leave a Comment

Subscribe
Membership
About the Author