Smashing Magazine
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.
[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]
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 Creative 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.
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|redd 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 dailymile 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 Job 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.
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 PicsEngine, 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
IconDock 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.
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 Tools 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.
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
Notepod 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 Church 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.
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
OfficeVP 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.
Transmissions 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. Virb 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 tap 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.
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 America (BarackObama.com) 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.
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 Basecamp, 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 App, 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.
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 Firefox 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.
Onehub 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 Monitor
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.
Fileshare HQ
This call to action button tells users what to expect ("start sharing files in minutes").
Livestream.com
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 CMS
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.
Hambo Design
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?"
The Resumator
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.
Wufoo
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 Design
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).
NCover
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.
Xero
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 – Espionage
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.
The Invoice Machine
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.
Ekklesia 360
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.
Checkout
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.
spinen
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.
Codebase
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.
GoodBarry
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 Interactive
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.
OH! Media
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.
Pixelcrayons
Check out how whitespace can greatly improve the amount of attention that this call to action button draws.
Ballpark
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.
One Theme Per Month
This call to action group puts the primary desired action in the middle of alternative actions. By choosing a very prominent color for the primary desired action, along with a larger area, it manages to put it above in order of importance compared to the secondary actions.
Scrapblog
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 Creative
This call to action button shows how by using an unconventional design, you can still draw attention even if surrounding elements are proportionally larger.
Kalculator
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 Beach
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.
The Highland Fling
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.
Commercial IQ
The 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.
dashboard
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 Photoshop
This tutorial on Six Revisions, written by me, will show you how to make large and noticeable call to action buttons step by step.
Inspirational Buttons in web design – Pattern Tap
If you need some inspiration on good button designs, check out this Pattern Tap collection.
10 techniques for an effective ‘call to action’
Paul Boag discusses some techniques for making good call to action buttons.
Good Call-To-Action Buttons
UX Booth has a good piece on what a good call to action button consists of.
Firefox Shows How a Strong Call to Action Can Boost Landing Page Performance
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.
Web Design Trends: Call To Action Buttons
Lee Munroe puts together a showcase of call to action buttons, along with a discussion on current design trends.
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. Connect with him via Twitter.
- 123 Comments
- 1
- 2
February 7th, 2010 1:58 pmNot very balanced feedback. You seem to underestimate the importance of a call to action button. Do a little A – B testing with various buttons and you will quickly see their importance.
- 3February 9th, 2010 12:02 pm
@ Tobias – fail. This post is absolutely fantastic for online conversion optimization, especially with e-commerce.
Thanks for the great content, Jacob.
- 4February 22nd, 2010 11:32 am
Thanks Tobias, for trolling so effectively here. You really know how to push people’s buttons.
- 5March 3rd, 2010 1:58 pm
ha! push people’s buttons! i get it.
- 6June 1st, 2010 5:41 am
yes Tobias, its just you
- 7July 7th, 2010 5:23 am
No, It’s not just Tobias. Me and the guys at the office had a good laugh at this posting.
- 7
- 6
- 5
- 2
- 8October 13th, 2009 12:44 am
@Tobias: well, actually call to action buttons are crucial for online conversion and they are an important part of any commercial web design. So actually I do think that this article is quite interesting and useful for those who will be developing a commercial site or application in the future.
- 9October 13th, 2009 12:45 am
I saw a lot of great examples using the call to action buttons in a great way.
Much inspiration.
Many thanks.
@micheltel
- 10October 13th, 2009 12:50 am
CTA buttons are crucial when it comes to selling / giving away an app etc online.
At Obox we changed the wording of our CTA from “Visit our theme shop” to “See Options and Pricing” the results were incredible to see, sales literally went up 200% by changing that button.
We got the inspiration from 37Signals and when we did the change I thought to myself ‘what are the chances’… but as it turns out, it really worked quite well for us.
- 11October 13th, 2009 1:10 am
Great article and a nice roundup about Call to Action. But I think you missed one good example, the Call to Action Buttons on silverbackapp.com. This example shows that sometimes the primary action isn’t really the primary action the user would choose. The primary action in most cases is something like “buy now” or “purchase now” and the secondary action is something like “Download now”. Silverback does it the other way around. Why buy a software , when you can download it for free to test it first?
- 12October 13th, 2009 1:12 am
Awesome roundup. I have been looking for something like this, especially since I work in the email marketing industry and the Call to Action is something that we study and work at all the time. Great job!
- 13October 13th, 2009 1:13 am
Great collection with interesting examples for our inspiration.
- 14October 13th, 2009 1:20 am
Great article! I think buttons can make a design succesfull or not. Sometimes it’s difficult to deal with priority of the buttons to design them.
Thanks for this article! And the huge collection of examples gives me a lot of inspiration too!
- 15October 13th, 2009 1:25 am
Yep – a good article on an essential part of most websites. Its so easy to over look these items. It would have been nice to end on a list of related tutorials in creating different styles.
- 16October 13th, 2009 1:46 am
ye good article, “call to action buttons” are important indeed.
- 17October 13th, 2009 1:50 am
This is pure gold. Thank you!
- 18October 13th, 2009 2:04 am
good collection!
- 19October 13th, 2009 2:27 am
@David Perel: Thanks for sharing that – just goes to show how language is important in calls for action!
@Manuel: Thanks for adding sliverbackapp. I think that’s similar to the Tao Effect CTA button set (featured above, in the article) where Download looks to be like the primary desired action versus buy now or purchase. I guess most first time users would be hesitant to buy it without downloading and trying it first, so the download now/purchase buttons are for return visitors.
- 20October 13th, 2009 2:29 am
Awesome post guys.
Needed information in one place. Everything there is to know on the subject really!Thanks,
Cezar
- 21October 13th, 2009 2:31 am
What? How is this a good collection? They’re all practically the same and show no diversity whatsoever. Whatever happened to the square button, the flat button, the non-glossy button, the button without a gradient?
- 22October 13th, 2009 2:32 am
Lovely! Thanks for this inspirational list of great styles.
- 23October 13th, 2009 2:38 am
Agree with you, Vitaly
- 24October 13th, 2009 2:47 am
Thanks. Great article. The text and design do make a significant difference to conversion rates. Ignore this best practice from Jacob at your peril.
- 25October 13th, 2009 2:55 am
Absolute, unadultered NONSENSE. Smashing, you are getting worse. Did you have 30 minutes to knock up an article? I don’t understand why this kind of crap is so popular. If we didn’t know how to do calls to action, we wouldn’t still have a job.
Tune in next week for Smashing’s latest gripping informative article: “Turning on your monitor”. Did you know that 5% of people FORGET TO PLUG IT IN FIRST?
- 26October 13th, 2009 2:55 am
must for every UI designers….thanks…
- 27October 13th, 2009 2:56 am
An interesting look at these buttons, thanks. I’d love to hear more examples along the lines of David Perel’s in comment 4, it’s really useful to hear about the effect these changes can have.
- 28October 13th, 2009 2:56 am
seems the red color is the king of call for action Button …
- 29October 13th, 2009 4:07 am
I’m guessing that the people who don’t understand the value of this post, aren’t responsible for conversions in online environments.
Every little subtlety counts when you move beyond doing something for the first time to exploring ways of optimising what you have already done.
Thanks for the time you spent on this article.
- 30October 13th, 2009 4:28 am
Good ol’ Call to action buttons! Nice list.
- 31October 13th, 2009 4:35 am
@tobias
@Tom:
CTA’s can be the difference in converting your strategic goals and being yet another waste of server space.Added an arrow to a CTA for a client a few months back and bumped sign-ups 30%. I kid you not.
Thanks Smashing for mixing up the content to include all that is helpful in designing, building and maintaining sites that work.
- 32October 13th, 2009 5:03 am
seriously, i’m kinda facepalming this article. What we’re looking at are different examples of call-to-action. Whether or not they are good, depends on how successful they are. We can really only see this with stats and actual information.
From what i’ve noticed, call to action buttons that blend with the page, are attractive and don’t try to call your attention (red, green, or yellow buttons on a highly contrasting background color or are overly large) work best. Alot of these, from stats by my users, won’t actually work.
In fact, my users avoid them…
So, what about these buttons, other than an opinion, qualify them as “best practices”?
- 33October 13th, 2009 5:13 am
Or Green or Blue…
- 34October 13th, 2009 5:25 am
This is also a study in colors. Almost all of the example CTA buttons are red, green, or blue.
- 35October 13th, 2009 5:43 am
This article is presumably now the most widely-read indication that I’m going to have to just get used to the web industry using the incorrect pluralization of the very subject of the article.
Calls to action.
Calls to action.
It’s CALLS to action.Just like it’s mothers in law, Tours de France, and culs de sac.
- 36October 13th, 2009 6:04 am
I like how the people that find this too basic for their current skills in design/web, bash SM for sharing useful information to people who may be just starting out. SM is like a school… you have your beginners class and you have your advanced class. If you understand the concept already, then skip the article.
- 37October 13th, 2009 6:05 am
Great examples. Putting on my direct marketing hat for a second, what I’d like to know is how well the different options convert. It’s also a good idea to test different wording, colors (usually bright colors work best), etc. After all, the key is not just different design options, but to see which calls to action/variations are the most effective.
- 38October 13th, 2009 6:16 am
I really like this article. It clearly displays design rules with examples which is incredibly helpful for cementing concepts I already understand. I definitely prefer these types of articles to the “5,000,000 Photoshop Light Tutorials” collections.
To the people complaining about this article being basic: SM didn’t trick you into clicking on this one, the title is very descriptive. This article is exactly what the title says it is. When you get what you expect, don’t complain.
- 39October 13th, 2009 6:19 am
@Vitaly Friedman, yes its very important. From this article i found out this:
Have to be RED (or Green if dont fit your design lol), Have to be with Arrow(Or die) and have to be BIG(If you have space. LOL Leave place for it!)!
- 40October 13th, 2009 6:19 am
Awesome post. I’m always looking for more innovative ways to lead users to inside pages. Great showcase of well-executed CTA buttons.
- 41October 13th, 2009 6:22 am
@Tobias : It’s just you.
Would be interesting to make a comparison between the different terms used again and again (Try / Sign up / Free aso…) to see which ones work best with what type of service, as well as checking if you prefer to limit your CTA to 2 or 3 words, or if a little more explanation works better.
- 42October 13th, 2009 6:34 am
Thanks for this article, I’ve been waiting for something like this for a long time. Its what I struggle with most on my websites.
- 43October 13th, 2009 6:58 am
Yes, buttons are the most important things to attract. Nice work
Thanks - 44October 13th, 2009 7:00 am
This is a great post. Very in-depth look at ways to make a successful Call To Action Button, and nice showcase of effective examples! Well done :)
- 45October 13th, 2009 7:15 am
Great post, thanks.
Red, green & blue + Gotham, Myriad or Helvetica - 46October 13th, 2009 7:17 am
@Garth, couldn’t agree more. This post contains a great collection, and I appreciate SM’s ability to compile information for unique and specialized topics such as this.
I am quite shocked at all of the colorful comments that have been surfacing on SM as of late. Of all the things to complain about… a post on CTA’s? Interesting…
- 47October 13th, 2009 7:25 am
I don’t understand all the hateful postings, I mean creating ways to help clients sell products is part of the job. And I think there are some great examples here for people who are just starting out.
I think j said it best, “SM is like a school… you have your beginners class and you have your advanced class. If you understand the concept already, then skip the article.” - 48October 13th, 2009 7:34 am
Guys,
Someone has been poaching ideas from Sitepoint ?
http://www.sitepoint.com/blogs/2009/10/12/5-tips-for-creating-an-effective-call-to-action-button/
LOL
Thats the 3rd time recently I spotted articles that are on the same topic.
Still it is is nice to see someone else giving thier take on the subject.
Just to follow up Sitepoint has a tutorial for Photoshop to create your own !
http://www.sitepoint.com/blogs/2009/10/13/make-a-big-beautiful-call-to-action-button-in-photoshop/
Cheers
Daveps. No, I don’t work for Sitepoint.
- 49October 13th, 2009 7:38 am
The majority of these buttons are pretty much the same.
In shape, colors and lack of originality. (with some exeptions of course)
All following the web 2.0 trend which i hate. RectangleRoundedGradientGlossy.
Show us something different for once - 50October 13th, 2009 7:43 am
Great article. I just finished a web design and advertising principles class where we discussed the best practices of calls to action — this was a nice recap.
- 51October 13th, 2009 7:47 am
This gave me ideas to use on my opt-in buttons. Thank you.
- 52October 13th, 2009 8:08 am
Good list full of examples. I feel the same as Garth… those that don’t understand the value, aren’t responsible for, or likely aren’t testing enough to increase their own conversion.
Which leads to my question… do you have or can you suggest tests for how to discover the best CTA for your purposes? The reason you have such a list here is that there are lots of subtle differences that can make an impact and that depends on the application specifically. What do you suggest?
- 53October 13th, 2009 8:08 am
It seemed like the first 2/3rds of this article could have really just been a template for any design element – i.e. use size, whitespace, color, positioning, etc. to create structure and hierarchy. Nothing really new there, and I don’t know that it needs to be rehashed in every article. Got bored before I reached the end of the article, which is too bad, because I’m in advertising design and usually articles about improving CTAs are interesting to me.
- 54October 13th, 2009 8:40 am
You should write an article on A/B and Split testing.
- 55October 13th, 2009 8:51 am
Excellent article. Only wish it went into a little more detail around the choice of wording like:
View versus Watch in relation video links for example.
- 56October 13th, 2009 9:25 am
Essential for any ecommerece site. Great round up :-)
- 57October 13th, 2009 10:33 am
@Michael
It’s CALL to action. It makes sense that way if you speak English and are not confused.
- 58October 13th, 2009 10:33 am
@tobias CTA buttons are essential to any site design and are widely used improperly. I think this article is great! Why you gotta hate?
@SuperChef As you said, it would be nice to see some data to back this up, but I tend to agree with most of the author’s points in this article.
With that said, CTA buttons work best when they are backed up by a legitimate product or service. If the user does not want to click, they won’t. Contrasting color and size wont fix that.
- 59October 13th, 2009 11:13 am
Excellent write-up. Simple, but often something that gets easily looked past. Thanks!
- 60October 13th, 2009 12:19 pm
Great article, Jacob. CTA buttons are indeed important any kind of conversion.
- 61October 13th, 2009 12:20 pm
@SuperChef, @Craig: I think you’re right. It actually wouldn’t be that difficult to collect data to test CTA’s. Good ol’ fashioned click tracking with different test cases would do the trick.
- 62October 13th, 2009 12:25 pm
Does anybody knows a button software?
- 63October 13th, 2009 1:26 pm
For those pessimists who don’t find this a good article, call to action buttons make a huge conversion rate in web forms and Email marketing.
- 64October 13th, 2009 1:53 pm
Great article, I agree a lot of the CTAs here are the same, but they also showcase that it really makes a difference what you say with the button. Honestly I feel like it’s up to you as a designer to make the button fit your scheme… and use the relevant information SM is giving you here to help boost your conversions. I’d have to be a liar to say I didn’t learn something new by reviewing the article… another good post!
- 65October 13th, 2009 2:13 pm
Its comforting to know that I’m not the only one that spends hours labouring over these kinds of details. The effort is entirely transparent to most people.
For me it translates into sales so its very important. I agree that the trend started by Apple is very apparent in a lot of the examples, but they are still very effective. The design principles are timeless.
Someone mentioned A/B testing which I agree would also make an interesting post. Thanks…
- 66October 13th, 2009 2:57 pm
Great article. I really enjoyed checking out some of the examples.
- 67October 13th, 2009 3:04 pm
What about the Smashing Magazine book pre-order? I have seen that button placed everywhere twice! haha
- 68October 13th, 2009 4:11 pm
An extensive look at current styles and look and feel of button design. Interesting article. However, some of the buttons look almost alike, there really isn’t anything distinction to differentiate one button on one site, from another website button. It seem that everyone is just doing the same thing that the next man is doing. For crying out loud, we need something different, something that breaks the unsual conventions.
Benga creative
- 69October 13th, 2009 4:56 pm
Great article, but it would have been nice to see some more concrete links to the fundamental elements and principles of graphic design. Most of the points in this article relate back to these (eg Similarity, Proportion, Contrast, Tone, Colour, Proximity, Space, Alignment,etc). That way this article could be helping to inform more designer decisions than just the design of CTA buttons.
- 70October 13th, 2009 5:43 pm
geez 1st person who commented obviously has never worked in online advertising. CTA is vital for sealing the next step for majority of promotions. This prompting for the user to take hold of the message the site or ad has communicated. It’s the most simplest and basic visual elements of online communicating. Why wouldn’t we want to look at a subject like this?…but yes buttons are looking all the same, however is this part of the design; familiarising the user that that these buttons are your indication to the next step in interaction?
- 71October 13th, 2009 5:54 pm
all i gathered was the requirements of round soft contrasted designs with drop shadows on everything.
- 72October 13th, 2009 5:59 pm
Great examples. Very timely post for me and my company as we have had issues with our brand and the button! Thank you for the one stop shopping.
- 73October 13th, 2009 7:22 pm
When will people get tired of rounded corners!
By the time HTML5 / CSS3 or whatever it is makes rounded corners as easy as <B>, people will develop allergy to them like Times New Roman.
I also think there is too much ‘gloss and shine’ going around the web these days.
It is only a matter of time before minimalist, functional interfaces make a come back.
- 74October 13th, 2009 7:47 pm
Good topic. It isn’t something I would have expected to read about it but they are something that are very important in a website or edm. hmm – nice one. I like this post.
- 75October 13th, 2009 8:32 pm
EXCELLENT article… as always. thank you
- 76October 13th, 2009 8:42 pm
I think it’s “O” for awesome!
- 77October 13th, 2009 8:56 pm
@Vitaly – I agree.
@Tobias – I understand that call to action buttons may really not be a great topic, but the same theory, when applied to content layout, would also decide the sequence in which your message is read.
White spaces, and visual separation which associates two sentences, can also be used to guide a users thought in a direction you want to. The fact that here we’re discussing buttons is immaterial, don’t you think so?
- 78October 13th, 2009 8:57 pm
Thanks guys for such nice information, it’s just awesome to see the examples in a bunch without having to browse through tons of nasty sites. Most of us will still agree that those above are worth looking at, and it’s just a matter of taste and personal experience to consider them state-of-the-art or not.
- 79October 13th, 2009 10:38 pm
thanks for very informative information
- 80October 14th, 2009 12:21 am
I have just been through this after reading many articles on CTA buttons. This one was one of the most interesting as I really like the feel of a lot of button examples here and it’s given me a lot of ideas for updating many of my ecommerce shops.
Although I’m not a fan of Amazon design….
There is one thing I would add to complete this document and that is a quick talk about amazon Add to cart buttons, as a lot of time and research has been spent on each pixel of that image and text they use, and they test conversion rates of every pixel of every page… So maybe a screenshot or two of amazon examples… It’s also interesting to see how their Add to cart buttons have evolved over time…Thanks for the article, I’m hoping to get better conversion rates after reading this + all comments.
- 81October 14th, 2009 12:24 am
One extra advantage of the post is that we got to see lot of smashing designed sites :)
- 82October 14th, 2009 12:43 am
This should be in the book! great insight.
- 83October 14th, 2009 1:03 am
非常好。。。
- 84October 14th, 2009 1:54 am
I hate people who complain in comments, if you don’t like the article, FUCK OFF! It’s not like you’re paying to view it.
Idiots. This is great information!
- 85October 14th, 2009 2:52 am
This is great stuff. Although I don’t use CTAs on my sights, it would apply to my employer for their next sight redesigns. >:3
- 86October 14th, 2009 3:04 am
thanks for very informative information.
- 87October 14th, 2009 4:48 am
Really interesting article. Thanks. Some awesome examples there of CTA btns.
- 88October 14th, 2009 5:24 am
@ Some Guy ‘I hate people who complain in comments’
Yeah, sheesh, such a pain when people have opinions, isn’t it? Would be a whole lot easier if comment fields just spat out ‘Awesome post! Will definitely use this in my next design! Dugg!!!!’ with a name next to it.
Dude, the whole point of comments is for people to either agree/endorse or challenge what’s been written in the post. If you’ve got a valid point, you should be allowed to express it. Just because *you* don’t agree with it, doesn’t make it invalid, or it’s author an idiot.
- 89October 14th, 2009 7:29 am
I think everybody that had a big problem with this article needs to get the sand out of their vagina. This website is a good, free resource. If you feel that this article doesn’t help you, then skip it. If you feel that you could have written a better article or round up a better group of examples and samples, then I’d like to see it.
I work in online advertising, so many of these ideas and concepts are useful to me, as well as seeing different designers’ styles in action.
- 90October 14th, 2009 9:46 am
I enjoyed this article. There are plenty of people who are making mistakes in designing buttons and having an article like this, or the examples listed, is a big help. I actually found this to be one of the more useful articles as it focused on the details of effective web design.
- 91October 14th, 2009 12:32 pm
this article its simple, basic, and good for people that is starting ! and im gessing that they also read this blog. So go ahead! nice work.
- 92October 14th, 2009 3:22 pm
Exactly what I needed for the project I’m working on at the moment – many thanks – it’s the tiny details that separate professional direct response design from…less professional design.
- 93October 14th, 2009 9:38 pm
I recently worked on a project for a client who was very much into Google A/B testing and simple tweaks to CTA’s and related messages on their site over the course of a couple of months increased their goal conversion by around 30% hence increased their sales and ROI for the website spend.
Not the most interesting article per se but for anyone who does a little more than just PSD to XHTML type work it’s vital information.
- 94October 15th, 2009 1:10 am
The way that GetSignOff deals with their call to action button is a bit different. When you hover over the ‘Sign up for a free account’ button, it highlights the word ‘free’ with a subtle animation.
I haven’t noticed this approach anywhere else and I think it is an interesting way of bringing attention to the word free. What do you think?
- 95October 15th, 2009 8:03 am
Thank you again for this inspiration!
- 96October 15th, 2009 7:37 pm
I think it’s a great article, and something that can’t be overlooked or emphasized enough. I would like to see some examples though showing real sites that have tested size, color, wording, etc., and see how that affects conversions.
- 97October 15th, 2009 8:33 pm
@Andy. Couldnt agree more. Comments both positive and negative should be welcome. We the readers need to express what we do and don’t want to read. I am sure smashing would like to hear from us that we dont like something, rather than us sneak away quietly never to be seen again. Comments good and bad should however always be done with some form of respect and also back them up with your reasoning as to why you think what you do. I personally find comments against the grain quite interesting, especially if the argument is valid and well spoken – Have an opinion!
- 98October 16th, 2009 1:16 am
CTA? How about looking at the CTA for the Smashing RSS feed – looks like a ‘look how many subscribers we have’ advert.
- 99October 18th, 2009 12:33 am
It will definitely help me in practise. Many thanks!
- 100October 18th, 2009 1:12 am
Thorough article with great tips and examples, kudos.
- 101October 18th, 2009 1:42 pm
Great article. I always find CtA buttons challenging because on one hand I want them to be noticed, on the other hand, I don’t want them to feel like they don’t fit the site, or somehow clash with the rest of the design – I find it a tricky balance to maintain. And there are some great examples and inspirations in this article on how to achieve that exact balance. So I definitely appreciate it.
- 102October 19th, 2009 5:46 am
The Paramore Redd example is horrible; the buttons fade into the background. Even a simple underlined hyperlink in a different colour is a much better option than those buttons.
- 103October 19th, 2009 11:54 am
My Boomer employer loves to use these CTA buttons on our site and email campaigns, but me, not so much. Thanks for the information, and the design suggestions. You’ve “converted” me, no more fights about the buttons!
- 104October 19th, 2009 3:03 pm
OMG Ponies!!! I love those shiny buttons!
- 105October 19th, 2009 8:34 pm
Wow, great list! and all of them are very inspiring.
BTW, thank you SM for featuring one of my designs, thank you, you made my day :)
- 106October 19th, 2009 10:38 pm
So many of these buttons are very poorly done. The tips aren’t bad but the button design!
Most don’t look like pushable buttons and are buried in a sea of noise or poor contrast. Good design to begin with would help much more than these workarounds. You should not have to add chevrons or triangles to buttons to make them recognizable (and it might not work anyway). Those symbols are so tired and overused for so many purposes that they are now meaningless.
The labels shown often provide good examples, but buttons with lots of words in several font sizes, icons, or background patterns tend to test poorly, because they are often mistaken for advertising and ignored.
Good buttons are the ones people recognize quickly and click correctly. If buttons look pretty too, that’s nice. You won’t know until you test them.
- 107October 20th, 2009 4:46 pm
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?
:)
Chris
- 108October 20th, 2009 8:42 pm
Im with tobias
- 109October 21st, 2009 12:27 pm
So many of these buttons are very poorly done. The tips aren’t bad but the button design!
- 110October 21st, 2009 2:45 pm
These are great ideas. I’m working on a wordpress e-commerce site and this article really helps. Thanks a bunch! WhaZoooooooom!
- 111October 22nd, 2009 12:01 pm
Thank you, i really liked the article! :)
- 112October 28th, 2009 11:18 am
Jacob – Awesome notes and research! Thanks for putting this together.
- 113October 29th, 2009 9:50 pm
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.
- 114October 31st, 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.
- 115November 29th, 2009 9:30 pm
great collection, i loved the new skype design
- 116December 19th, 2009 6:33 pm
Thanks for this. Some really nice websites to be inspired from as well. :p
- 117January 11th, 2010 1:15 pm
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.
- 118February 17th, 2010 7:49 am
Thanks for this post. Great information for me.
- 119April 2nd, 2010 4:57 am
I found this article at the perfect time, I”m creating a website where this is really important! thanks for the great info.
- 120April 14th, 2010 12:08 am
Nice job.Good info about call to action
Regards
Karthik - 121June 11th, 2010 3:59 am
Details are very important in the site!
- 122July 17th, 2010 4:21 am
thanx for this idea, I am your fan for this.
- 123July 29th, 2010 12:18 pm
Thanks so much for this article. It has useful tips and suggestions *bookmarked*
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
- The Magic Behind Amazon's 2.7 Billion Dollar Question - http://bit.ly/AxGI5 - Nice read.
- Why Your Customers Don't Want to Talk to You - http://bit.ly/beU7Bb - Very interesting read.
- Designer Sheep And Invisible Platypus - http://bit.ly/cvm2Wx
- 50 Tileable and Seamless Pattern Sets (500 Patterns) - http://bit.ly/bPzqio
- 4 Ways to Auto-Refresh your Browser when Designing new Sites - http://bit.ly/9GL0pB (via @buysellads)
- PageToFame: allows you to rate first pages of books, compare ratings and follow your favourites - http://bit.ly/lmqJN
- CSS3 Browser Tilt-Shift: an experiment trying to create a Tilt-Shift effect on Text using only CSS3 - http://bit.ly/9Bs3nr.
- New on SmashingMag: In Defense Of Photoshop - http://bit.ly/cKmD5Y (now with a Facebook Like-button)
- The Web’s Undead - http://bit.ly/cZQQQ2 - Very nice short article.
- 40 Free Professional and Detailed Web Layout PSD Templates - http://bit.ly/bIoKWG
Its just me or you are running out of interesting content ?
I mean “Call to Action Buttons” ..come on..