Call to Action Buttons: Examples and Best Practices


Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. "Buy this now!") or lead to a web page with additional information (e.g. "Learn more…") that asks the user to take action.

How can we create effective call to action buttons that grab the user’s attention and entice them to click? We’ll try to answer this question in this post by sharing some effective design techniques and exploring some examples.

Best Practices for Effective Call to Action Buttons

Designing call to action buttons into web interfaces requires some forethought and planning; it has to be part of your prototyping and information architecture processes in order for them to work well. In this section, we’ll discuss some design techniques for call to action buttons.

Draw user attention with size

In web pages, the size of an element relative to its surrounding elements indicates its importance: the larger the element is, the more important it is. Decide how vital certain site actions are, and size your call to action buttons accordingly.

Size of call to action button versus surrounding elements

Lifetree Creative1 exhibits this idea of size to indicate importance with their call to action button. Compare the size of their button with the company logo. To grab the user’s attention, the call to action button is roughly 20% larger (in width) than the logo. Even though the logo is placed higher on the web page, your eyes are drawn to the call to action button because of its larger size in relation to surrounding elements.

Lifetree Creative2

Size of call to action button versus less important call to actions

A web page may have multiple calls for action. To indicate the relative importance of a call to action with respect to other actions, you can vary their sizes. Here is an example of this concept on the paramore|redd3 website where the call to action button that asks the user to sign up for their newsletter is significantly larger than the continue reading call to action, indicating that on this web page, they would rather you take the action of subscribing versus reading the blog posts.


Draw user attention with prominent positioning

The placement of call to action buttons on a web page is critical to drawing the eyes of visitors. Placement in prominent locations such as the top section of a web page can lead to higher landing page conversions because users will likely notice the call to action button and take action.

Placement in a distinguished area

Putting a call to action button on a distinguished area is one way of making it stand out in a web layout. You can see this idea in action on the dailymile5 website where the call to action button looks to be on a higher plane (on top of) other site elements such as the bar graph graphic.


Placement at the top of the web page

To illustrate this concept, take a look at the "Post a Job!" call to action button located at the very top right corner of the Your Web Job7 website. By putting the call to action in a very prominent area, it is more likely that the user will notice it or remember it later, after they have looked at the site’s content. For example, if a job poster wanted to explore the site before taking the action of posting a job, the "Post a Job!" call to action will be ready for them regardless of which page leads them to a conversion, and they’ll be more likely to remember where they can easily take this action because of its prominent placement.

Your Web Job8

Placement at the center of a layout

Locating a call to action button in the middle of a web layout with no (or significantly smaller and deemphasized) flanking elements can be an effective way of drawing attention and enticing an action. In the case of PicsEngine9, even though the call to action button doesn’t have a high color contrast with its background and surrounding page elements, it still manages to draw attention simply by its centered placement.


Use whitespace to detach call to actions from other elements

The use of whitespace (or dead space) around a call to action button is an effective way of making it stand out in areas where there are many elements.

Whitespace used to distinguish a call to action button

IconDock11 shows just how effective sufficient whitespace is. Even with a small and plainly-designed call to action button, it still stands out because of the space in between its adjacent elements.

IconDock 12

Vary the amount of whitespace to indicate a logical connection

The more whitespace there is in between a call to action button versus a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the whitespace in between those elements and the CTA.

For example, Donor Tools13 has text above their "Sign Up" call to action that tells the user the benefits of signing up. On its right is a browser screenshot that is there for aesthetics and not necessarily for prompting the user to click on the "Sign Up" call to action button. By reducing the whitespace in between the text and call to action button, you group these two elements visually. The whitespace in between the browser screenshot and an image ensures that the eyes are not distracted from the call for action.

Donor Tools14

Use highly contrasting colors

Deciding what colors to use for call to action buttons is very important. Use colors in your call to action buttons that have a high contrast relative to surrounding elements and the background because it is critical to ensure that the user notices your call to action.

Color contrast versus surrounding elements

Notepod15 exemplifies how color contrast between a call to action and its surrounding elements can be effective in drawing user attention directly to it. The surrounding elements are all black, while the call to action button is a bright blue color.


Background/foreground color contrast

Valley Creek Church17 sets its bright yellow "Learn More" call to action button above a grayscale image. Even with a simple call to action button design on top of a complex element (a photo in this case), it still stands out because of the color choice.

Valley Creek Church18

Offer secondary alternative actions

A web page can have multiple calls for actions. Sometimes it’s necessary to offer a secondary action in order to convince the user to later take your desired primary call for action. For example, before the user signs up for a web service, some users may need further information to be prompted to take the action of signing up; secondary actions may be calling them to take a product tour or to visit a web page with more information about the product.

Displaying secondary actions beside the primary action

OfficeVP19 displays two call to action buttons beside each other — centered and located at the top of the web layout. By differentiating the color, users can see that they have two distinct routes: they can either sign up directly (primary action), or if they wish to learn more before committing, they can take the secondary action of taking a tour first.


Transmissions21 also shows this notion of having a secondary action next to the desired primary action. In this case, the primary action is for the user to purchase the application. If they want to try it before purchasing, then the secondary desired action is to download the application first. Notice that the primary action is indicated by making it more prominent than the secondary action, having a higher color contrast to its background than the secondary call to action button. Thus, you effectively draw the eyes from left to right.

Also, note the use of reduced whitespace between the two call to action buttons relative to other elements in the area, effectively grouping the buttons together.


Displaying secondary actions below the primary action

Alternatively, you may wish to display the secondary action below the primary action. This may be necessary if you need to have greater visual separation of your calls for action. Virb23 shows this situation where the "Join Now" call to action is placed above the secondary action of taking the product tour. Notice that the secondary action is further separated from the primary action by using a more muted color for its default state.


Convey a sense of urgency

Phrasing of the action by using bold, confident, and commanding words can alter the user’s perception in such a way as to convince them that they shouldn’t wait any longer to take action and that waiting to take action would result in a penalty or a missed opportunity.

tap tap tap25 demonstrates this idea of adding urgency to a call for action. The "Buy Now" call to action button has the text "Intro price", subtly suggesting that the longer the user waits to take action, the higher is the risk of having to pay more later on when the introductory price will have passed.

tap tap tap26

Oftentimes, suggestions to perform an action can be effective in creating a sense of urgency. Using words such as "now", "immediately" and "right now" can convey such urgency. Take the Organizing for America27 ( example of appealing to website visitors to "DONATE NOW". If instead it simply said "Donate", the sense of urgency would disappear and users may be less likely to take action.

Organizing for America28

Tell users that taking action is easy

Often, a user’s hesitation to take action stems from thinking that an action will be difficult, costly, or time consuming. By taking care of these concerns, your call to action buttons can lead to more conversions.

For example, on Basecamp29, the call to action button explicitly defines the time it would take the user to sign up and tells users that signing up is costless (free). This approach weakens two primary users’ concerns when it comes to taking action online: paying (which also requires them to take additional actions such as getting their credit card) and time constraints.


In the example of Tea Round App31, they tell that user that they won’t be getting spam emails by taking the action of signing up for their email service, which is a cause for concern whenever giving your email to a third-party service.

Tea Round App32

Tell users what to expect

Most web users are hesitant to take things they’re presented on the web at face value. By experience, their trust has been burnt before by links that promise free service only to find out that they’d have to put in their credit card numbers to get what they want. To increase click conversion and to build trust, anticipate users’ scepticism and tell them what they will gain by taking the action you’ve presented to them. When designing a call to action button, think of all the potential questions users will have, and make sure that you answer them in time.

Mozilla Firefox33 tells users what exactly to expect by clicking on their call to action button. The call to action button tells you that you’ll be getting Firefox 3.5, that it’s free, and (for those needing greater specificity) that the exact version is 3.5.3 for the Windows operating system, that the language is English, and that you should expect a 7.7MB download.

Mozilla Firefox34

Onehub35 anticipates the question of whether the user (upon taking action) needs to pay up front or whether they can take the product for a test drive by telling the user that if they take the action of signing up, they’ll have a 30-day trial free of charge.


Design Showcase of Call to Action Buttons

Now that we’ve covered some best practices for designing call to action buttons, let’s look at some exemplary implementations of call to action buttons on websites. We’ll tie in these designs with the techniques and best practices from above and explore how they aid in accomplishing good design practice.

Campaign Monitor37
This set of call to action buttons presents two potential user actions: "Try it for free" and "View features". For users who know about Campaign Monitor already and want to try it now, they can take the primary desired action, while others who’d like to explore before making the time commitment can take the secondary action of viewing the features of the web application.

Campaign Monitor38

Fileshare HQ39
This call to action button tells users what to expect ("start sharing files in minutes").

Fileshare HQ40

This set of call to action buttons uses vertically-arranged grouping to indicate the desired order of importance of the actions being presented to the user. The desired primary action is to get an estimate, followed by getting details about the service, and lastly, to compare and contrast between different plans.


Traffik CMS43
This call to action button is placed in a prominent location at the very top of the web page and is highlighted relatively to the surrounding elements by size and color use.

Traffik CMS44

Hambo Design45
This call to action button tells the user what to expect: by getting a quote, there are no strings attached. It anticipates the question of "how much will a quote cost me if I were to invest my time in going through this process?"

Hambo Design46

The Resumator47
You can see many best practices in action on this call to action button implementation. First, it uses whitespace, size, and color to clearly separate it from other page elements. Then, to create a logical grouping with elements that can help convince the user to take action, it has less whitespace with the feature text above it, and the secondary action of "Take a tour first" below it.

The Resumator48

Wufoo offers two actions that the user can take in a horizontally arranged fashion with the primary desired action on the left. The buttons are large and very hard to miss, yet they are not obtrusive when looking at the overall design.


Mobile Web Design51
This call to action button is placed in a prominent location; it has large size and a distinctive color with respect to surrounding elements. To provide additional context on what it means to "Purchase the book", the call to action button is followed by text explaining cost and available format (traditional book or PDF).

Mobile Web Design52

These call to action buttons are stacked. The primary desired action is on top of the blue secondary desired action. The user is drawn to the button because of the size, and using a blue hue for the secondary desired action mutes it relative to the primary desired action. Notice the use of whitespace to create a logical grouping of the three related elements that can help make the sale: the text that tells users what NCover does, the sign up call to action, and the tour call to action. In contrast, notice the increased margin between this group and the element on the right.


This set of call to actions exhibits the use of providing users a secondary action. On the right of the primary desired action, there is a text link that calls for the user to "find out more". For users not willing to sign up right away, the design may have increased the likelihood that the user will “find out more” before signing up.


Tao Effect – Espionage57
Here is a set of call to action buttons that provides users with three options: Download, Buy Now, or Upgrade. In this case, the primary desired action is to download the application, followed by the two equally-prioritized actions of Buy Now, or Upgrade. This distinction is made by varying the colors of the call to action buttons, with the primary action more prominent than the two secondary actions.

Tao Effect - Espionage58

The Invoice Machine59
Here you can see two call to action buttons that are highlighted with a blue border. Because they’re both styled the same way, we can assume they have equal importance. Perhaps the company determined that it is unlikely that the user will take the action of signing up before seeing what they have to offer, or perhaps they’ve determined that the product tour will help them convert viewers to members more effectively.

The Invoice Machine60

Ekklesia 36061
This set of call to action buttons showcases the use of icons to denote a sense of moving forward (indicated by the arrows pointing to the right). They use a high-contrast color against the dark blue background to make the call to actions prominent in the page design.

Ekklesia 36062

By using a very prominent color for their call to action button relative to the overall design, even though the image above it is significantly larger than the button size, it still manages to attract the user’s attention.


Using direct and clear language tells users what to expect when they take action: in this case, clicking on the call to action button will let them find out more about the product.


This call to action button tells users what they can get by taking action: a free 15-day trial. It manages to draw the user’s attention by using a high-contrast color, an icon on the left, and plenty of whitespace.


In this call to action, you can see how whitespace, size, and smart color decisions are effective in making a call to action very noticeable. Emphasizing that the action will be "FREE" conveys to users what to expect.


Wake Interactive71
Here, the color of the call to action button relative to its surrounding elements makes it pop out even with the small amount of whitespace surrounding it.

Wake Interactive72

OH! Media73
This call to action button really stands out of the page because of its position, the whitespace surrounding it, and – most importantly – the color choice. Looking at the page, the eyes are drawn directly to the call to action.

OH! Media74

Check out how whitespace can greatly improve the amount of attention that this call to action button draws.


The size of this call to action button is effectively attracting the user’s attention. Its clear and direct language tells the user exactly what to expect when taking the action.


You can see the effects of using a prominent color, sufficient whitespace, and size relative to surrounding elements to attract users’ attention. Straightforward language conveys a sense of easiness, claiming that you can "start" right away by taking action.


13 Creative81
This call to action button shows how by using an unconventional design, you can still draw attention even if surrounding elements are proportionally larger.

13 Creative82

This call to action tells users exactly what to expect: by clicking on this call to action, they should anticipate shelling out $3.99. Using the word "only" hints that this is quite a good deal, which can help make the sale.


Web Design Beach85
Below is a set of call to action buttons with two distinct colors. The more prominent one, "get a quote" suggests that it is the desired primary action.

Web Design Beach86

The Highland Fling87
This call to action button manages to call attention to itself by plenty of whitespace, prominent positioning, and the use of an icon to distinguish itself. By using the word "now", it conveys a sense of urgency and a need to act immediately.

The Highland Fling88

Commercial IQ
89The size and prominent positioning of this call to action button draws users’ attention. A magnifying glass icon adds context to the purpose of the action. Adding the text "Free to search" anticipates the question the user may have about the cost of the action.

Commercial IQ90

Here, you can see the use of a high contrasting color to make the call to action stand out, even among significantly larger page elements.


Additional Resources on Call to Action Buttons

If you’d like to read more about Call to Action buttons, here are some relevant resources and articles on other sites.

How to Create a Slick and Clean Button in Photoshop93
This tutorial on Six Revisions, written by me, will show you how to make large and noticeable call to action buttons step by step.

How to Create a Slick and Clean Button in Photoshop94

Inspirational Buttons in web design – Pattern Tap95
If you need some inspiration on good button designs, check out this Pattern Tap collection.

Inspirational Buttons in web design - Pattern Tap96

10 techniques for an effective ‘call to action’97
Paul Boag discusses some techniques for making good call to action buttons.

10 techniques for an effective 'call to action'98

Good Call-To-Action Buttons99
UX Booth has a good piece on what a good call to action button consists of.

Good Call-To-Action Buttons100

Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance101
Read about how a good call to action button can improve conversions. You’ll find a comparison between the call to action buttons used by Firefox, Opera, and Internet Explorer.

Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance102

Web Design Trends: Call To Action Buttons103
Lee Munroe puts together a showcase of call to action buttons, along with a discussion on current design trends.

Web Design Trends: Call To Action Buttons104


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104

↑ Back to top Tweet itShare on Facebook

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

  1. 1

    Nice article but it only covers one kind of CTA button: the big sort!

    On the financial comparison site I’m currently working on we have CTA buttons in table rows. In this role they must encourage the user to click them but they can’t dominate the product details in the row.

    So they’re smaller, there are lots of them, they can have few words/symbols on them and they are vital to the business model of the site (all its revenue comes from people clicking on them).

    How about a follow up article that looks at this kind of CTA button role and also which has some empirical data and not just design-based opinion?



    • 102

      Nice effort and really a nice article that you have post ! Awesome described by you with an example of what is “call to action” button ?


  2. 203

    Im with tobias

  3. 304

    So many of these buttons are very poorly done. The tips aren’t bad but the button design!

  4. 405

    These are great ideas. I’m working on a wordpress e-commerce site and this article really helps. Thanks a bunch! WhaZoooooooom!

  5. 506

    Thank you, i really liked the article! :)

  6. 607

    Jacob – Awesome notes and research! Thanks for putting this together.

  7. 708

    Great article. Though some are complaining about the buttons being similar, that’s actually what it’s all about – staying consistent for the user’s sake. Change it up too much and your CTA button won’t be effective at all.

    Smashing Magazine – Amazing as usual.

  8. 809

    Gorkem Turgut OZER

    October 31, 2009 1:22 pm

    Seems like a new makemycalltoactionbuttonbiggercream website needed (makemylogobiggercream dot com). Looking at the analyzed examples, proportionally bigger size seems to be an almost common feature among all the elements mentioned.

  9. 910

    great collection, i loved the new skype design

  10. 1011

    Thanks for this. Some really nice websites to be inspired from as well. :p

  11. 1112

    This is a great resource of ideas and different examples of quality Call to Action buttons. I really found this quite helpful and will be sure to pass this along to clients and other people that are working on building lead generation web sites. Thanks for sharing this info.

  12. 1213

    Thanks for this post. Great information for me.

  13. 1314

    I found this article at the perfect time, I”m creating a website where this is really important! thanks for the great info.

  14. 1415

    Nice job.Good info about call to action

  15. 1516

    Details are very important in the site!

  16. 1617

    thanx for this idea, I am your fan for this.

  17. 1718

    Thanks so much for this article. It has useful tips and suggestions *bookmarked*

  18. 1819

    This article is AWESOME! Thank you so much, so much help!

  19. 1920

    This is great stuff. I have only one real huge call to action button, in color (the only color on the site) in a great location. Let’s see how well it works.

    Awesome post!

  20. 2021

    Great post mate, will use this definitely =].

  21. 2122


    Thank you for a great article.
    I’ll be using this advice for an upcoming site launch.

    Cheers, Adam.

  22. 2223

    James | Employee Scheduling Software

    December 21, 2010 10:02 am

    Thanks for this post.. wish I could incorporate all of these into one button.

    1) let users know it’s free to sign up – 30 day trial’
    2) no credit card needed
    3) sign up is fast and easy
    4) yet, still be an effective high attention catching button.. seems too much info will draw the clicks away..

  23. 2324

    Thanks for the mention. It’s great to be grouped with so many amazing sites.


  24. 2425

    It is a very useful podcast, thanks for your sharing

  25. 2526

    An informative article indeed. Thank you for sharing. As a web designer for ecommerce solutions, I’ve found CTA buttons are worth their weight in gold, and even the slightest change in color and/or content makes all the difference in conversions. What’s even more interesting is to track the success and/or failures of different CTA button designs. I’ve often been surprised at the results.

    Your suggestions for best practices are definitely something to consider. Thanks for the inspiration.

  26. 2627


    I find this a very interesting article!
    However since a few days the images aren’t loading anymore…

    Can somebody please fix this?

    Thanks a lot!

  27. 2728

    I was told by a colleague in Germany that brief CTA buttons do not resonate well in that market. She went on to say a hyperlinked sentence is preferred. Does anyone in this message string have any insight into CTA button best practices in Germany?


  28. 2829

    thank you

  29. 2930

    Interesting article…if for nothing else that it also highlights how important language and the content of what’s on that button is important. I come from a content strategy and interaction design background and to me when a button is written ALL IN CAPS I feel like it is shouting at me and really trying to do a hard sell.
    It actually makes me not want to purchase the product.

  30. 3031

    What suggestions would you make on my site with the Get Instant Access button in top email capture?

  31. 3132

    Great stuff in this article for all levels. I used this as a bible in my first effort at a landing page and call-to-action, and conversions and feedback has been GREAT. You can see us at if you’re interested. We combine a few tricks to get the reaction we want, but it’s all pretty self-explanatory. It also helps that we’re not SELLING anything!


  32. 3233

    I found this article useful, though I think it would be better if you combined this with some research about colour perception.

    A formal and scientifically verifiable explanation would be great. All these examples are interesting and we see that red and green are fashionable. Amazon’s buttons, however, are yellow. Why?

  33. 3334

    Hello, I am building up a new website for my company and I was wondering what the right process would be to determine the right call to action buttons. We have a B2B product whose sales life cycle is probably six months to 1 year. Based on this, I cannot have a button like ‘buy it now’ or ‘try it now for free’. I suspect I shall offer some valuable information in return for them leaving their contact information? Any tips much appreciated! Davide

  34. 3435

    I rebuilt our website recently. I have never thought about how important the call now button is. I have always said I don’t want to coerce my customers into “tricking” them to act faster. I felt like I would be one who would avoid the call now button but be more inclined to click the call button. However when honestly looking at this article objectively, if I found something i truly was interested in, I would most definitely be more drawn to click “Call now” over “Call”. Call says I can do it anytime, so maybe I can come back to it another time or day. Well many times that other day or time never comes. I really liked this article, thanks

  35. 3536

    Great share. As user experience designer I learned that it’s the small details that makes a difference in the users point of view.

  36. 3637

    Sanjeev Kumar

    July 25, 2012 11:52 am

    I was searching some information about “call to action” button and finally here i get a great article.

    I would like to say only one word.. “Thanks”

  37. 3738

    Still have some confusion to get this concept. If we put read more buttons as call to action how its effective to get serp of website?

  38. 3839

    What a great list of CTA examples – thanks Jacob :-)

  39. 3940

    Hey I wanna share this, where are the share buttons :))

  40. 4041

    This exactly what I was looking for! Thank you

  41. 4142

    Great Article !!! Simply amazing lot of example to showcase the effectiveness.

    Thanks for putting it all together in one place.


↑ Back to top