Boost Sales with Better Buttons

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

When it’s all said and done, there is no more powerful weapon in an online retailer’s arsenal than the add-to-cart button. Merchants can spend unlimited resources on market research, product development, advertising and social media, but the success of each one is ultimately decided by the click of a single button.

That’s why it is critical for e-commerce professionals not to underestimate the importance of this design element. The five fundamental components to consider when producing a call-to-action button are its size, color, shape, text and placement, and each one has to be weighed with careful precision.

There are some guidelines to follow but it is one of the most hotly debated topics in e-commerce – there are no right or wrong answers. The only way to know for certain what will work best for your site is to test all of the different options, but below are some suggestions and examples from retailers.


Size: Most conversion experts agree that the bigger the button, the more attention it will command – but there is a limit to that theory. Banner blindness is a legitimate affliction, so the button has to be big enough to grab the user’s eye but not so big that it resembles a banner ad. Ironically, being too subtle or refined with your button can be an even bigger mistake, so to err on the larger side is probably the safer bet. More important than the actual dimensions of the button is how it compares to the other elements on the page, from which it should stand out clearly. Here is one example of a generously sized button from that leaves no doubt about the call to action.

Color: Countless studies have been performed on the effects that colors have on Web users. Among the findings are that red increases the heart rate, yellow draws the eye fastest, green instills a sense of calm and blue may be associated with indecision. Yet you will find all of these colors being used for call-to-action buttons across the Web, and a number of others as well. One color that many experts can agree has a successful track record for this purpose is orange, which is a natural eye-catcher and blends the more aggressive red with the cheerful yellow for what could be a potentially winning combination. Again, the actual color itself may be less important than how it contrasts the rest of the page. Here is an example from Amazon.

Again, no specific shape has been proven to outperform the rest, but it is true that the most commonly used shapes are round, rectangular and oval. Some experts suggests using irregular shapes for this very reason, to help your buttons stand out from the masses. Possibilities for this strategy would include designing eye-catching shopping carts or plus signs for your buttons. The shape of your button can also help to identify your brand, as in the case of Bath Body & Works below.

Text: The text is a very important part of the equation but one that is also frequently overlooked or undervalued. It may seem that retailers are limited in their options, but their decisions can have a major impact on conversion rates. “Add to Cart”, for instance, sounds less demanding to a user than “Buy Now”, which takes a more direct approach. The differences may seem subtle but they have significant consequences on separate consumer groups, and the best way to determine what is best for your customers is to test the various options. Guidelines to follow include keeping the text simple and brief, two or three words only, and to always start with an action verb. Here’s an example of two call-to-action options from, and their very different presentations. 

Placement: The placement of the button is critical. Call-to-action buttons have to stand out from all of the surrounding content on the page, which means that a liberal use of white space or other negative space is usually called for. Using this space effectively can be as important as the size and color of the buttons, as well-managed use of negative space around the button will make it appear larger and more striking. Here’s an example from’s recently redesigned website.

Login To Comment

Become a Member

Not already a part of our community? Sign up to participate in the discussion. It's free and quick.

Sign Up


JohnS 10-25-2010 9:54 PM

Great stuff. That all too important button is often overlooked. ~ Commented through my Website Magazine iPad App!

TheoC 10-26-2010 9:19 AM

Great article.  I've heard for years about the power of colors, expecially Orange and Red.  Is that why I can't stay away from Home Depot?!?!!?!

I would say the average person has no idea how much thought goes into every little detail of a good website.  On the flip side we've all been to sites that haven't received nearly enough cognitive attention.

Al Sefati 10-26-2010 10:30 AM

This is great. I am working on an ecommece website with links instead of buttons I have been thinking of changing that and this article came just in time.

LuisH 12-12-2010 9:01 AM

I've always realized the importance of "Add to Cart" buttons, but never stopped to consider how its color can either help or hinder the effectiveness.

Recently, mainly out of growing tired of looking at the same old big red button, I changed its look to a more pleasing (to my eyes) "mustard" yellow button and it appears that simple change has had a VERY positive impact on sales.

Another factor, usually ignored, is to keep reminding customers that ordering from your site is safe and secure.

I think that online security firms, such as Verisign and Trust Guard--to name a couple, should take advantage of the fact that they can further their brand by offering their clients branded "Add to Cart" buttons. I am actually surprised that I've never seen something, as basic as that, being offered.

Jon Design 05-08-2012 2:05 AM

These are all good points of observation, but I also think that when people see the same text or format for the same button functions across multiple sites they shop from, it gives them a sense of security and they are more likely to buy from these sites. The continuity is somewhat soothing and if visitors have seen it on a previous product they’ve purchased and know that the site is endorsed with a trust seal, they will automatically assume the next site is the same.

Add to the discussion!

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920