Could This Be The Best Checkout Button?

checkout-buttons

So, you are planning to design a checkout button? Let me help you a bit with that.

Until recently I thought that a web button is so simple to design that it will take a couple of minutes to do it. After researching the look and feel of the checkout buttons of 111 most important e-tailers, I realized that what seemed simple, it actually was not. I identified eight design elements for something just as “simple” as a checkout button – some say that I complicated simple things :) And there may be other elements that I missed as well, so please feel free to contact me if you have comment or share your thoughts.

I want to share with everyone what I believe is one of the best checkout button, based on my previous research. Keep in mind that the color of the button is just for illustration purposes only. In practice you may want to use a color that fits your brand and website’s color scheme.

Those of you who want to use our design we made a downloadable .psd collection available at the end of this post). Let’s get started.

the best checkout button

Elements of a CHECKOUT Button

Insights

  • slightly rounded corners for a better look and feel (#8).
  • a shadow to simulate floating  (#7).
  • a little bit of light to create a subtle 3D effect (#1).
  • a CTA label (this call to action contain the word Checkout) (#6).
  • a strong CTA verb – “Proceed” seems to be used by most online retailers (#2).
  • a small arrow pointing to right to suggest “next” (#4) .
  • telling users that the next pages are secured will increase trust and click through rate on your button (#3).

Regarding the color of the button there’s no single color that performs best. When you decide on color and size , keep in mind the color scheme of the page this button will be displayed. The button contrast with the overall look and feel of the page, it better be above the fold and it should probably the most visible element on the page.

the best checkout button in 6 color variations

Free Checkout Buttons

Update: Below are the several other web buttons that complement a checkout button: add to cart, buy now, confirm order, continue shopping, more info, next, previous  and update cart. They are in .png format so you can just copy each button to your site and .psd formats, for those who want to make changes to it.

If you decide use these buttons on your site let us know how they performed. Any backlinks pointing to www.pitstopmedia.com is also appreciated :)

the add to cart button in 6 color variations

Add to Cart

the buy now button in 6 color variations

Buy Now

the confirm order button in 6 color variations

Confirm Order

the continue shopping button in 6 color variations

Continue Shopping

the more info button in 6 color variations

More Info

the next button in 6 color variations

Next

the previous button in 6 color variations

Previous

the update cart button in 6 color variations

Update Cart

You can download the checkout button here the additional buttons here.

Pitstop Media offers ROI based internet marketing services such as landing page testing services and conversion rate optimization services. Our A/B and multivariate tests have helped companies increase conversion rates by as much as 75%. Let us increase your conversion rates, too!

VN:F [1.9.22_1171]
Rating: 7.8/10 (30 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 11 votes)
Could This Be The Best Checkout Button?, 7.8 out of 10 based on 30 ratings

About

Traian is Founder and Director of Search Marketing at Pitstop Media Inc. He has more than 11 years experience in helping small and medium businesses generate and convert organic traffic from search engines. Connect with Traian on Google+

 

44 Responses to “Could This Be The Best Checkout Button?”

  1. Mark said:

    Jan 08, 09 at 3:02 pm

    Awesome buttons! You’ll see a version of it in a revision of our web site, which should go live next week.

    Thanks!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  2. traiann said:

    Jan 08, 09 at 6:36 pm

    Thanks Mark. Let me know how they perform

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: -2 (from 2 votes)
  3. Matt Gardner said:

    Jan 12, 09 at 5:03 pm

    Love your work – thanks for the informative background to what makes a great button. Have dropped paypal’s api (was using it via CoffeeCups Shopping Cart – but it resulted in 100% lost sales because no-one likes Paypal (except me apparently…)) and replaced it with our own credit card payments gateway.

    Thanks so much.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. traiann said:

    Jan 16, 09 at 4:27 pm

    Hey Matt,

    I see you are using the buttons on the website. Thanks for trusting our work. How do they perform against other buttons? Are you A/B testing?

    In regards with the payment options, I would advise to offer your visitors more options: PayPal, your own CC processor, Google Checkout.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. K. Praslowicz said:

    Feb 10, 09 at 10:31 am

    I was trying to design my own checkout button for my site when I came across these. I tossed my best efforts aside and just ran with the ones you’ve provided for us. It looks great when I miniaturized it for an add to cart button, as well as the primary checkout button.

    Here is a quick link to a page that uses it if you don’t want to have to drill down to find it.

    VA:F [1.9.22_1171]
    Rating: 4.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. TraiaN said:

    Feb 10, 09 at 1:07 pm

    Praslowicz,
    Congrats for your clean website. It looks great!

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. jackie said:

    May 08, 09 at 7:01 am

    great info – will definitely be having a go at creating some nice new buttons!!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  8. chapolito said:

    Jul 23, 09 at 2:27 pm

    interesting read – I would guess though that some A/B testing results might not necessarily be the same as most commonly used practices.

    Thanks for sharing!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  9. webshaper said:

    Jul 28, 09 at 6:59 am

    nice one. yes, the “call to action” and the “enforcing trust” part are critical. yet a button can only do so much. I recommend do this together – Top 10 ways to build trust for your online store at http://www.webshaper.com.my/learn/top-10-ways-build-trust-online.php

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  10. Mortin said:

    Sep 29, 09 at 3:23 am

    Thx, i will try it with a A/B Test next week. At the moment i got the problem that i work on an old PC with the Fireworks MX Software, totally annoying. I gave you a Feedback in a month how it works

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  11. John Rowell said:

    Oct 15, 09 at 5:07 pm

    Good insights and cool buttons! Gonna use one on my website :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  12. steve said:

    Nov 27, 09 at 10:55 am

    Nice work, and truly appreciated!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  13. Marco said:

    Jan 04, 10 at 10:53 pm

    Nice buttons, I also found http://seoagent.org/call-to-action-buttons/

    Cheers,
    Marco

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  14. Russian said:

    Apr 11, 10 at 4:00 am

    Well… I agree with you about red color and I think that “aqua style” is one of the best choice for create actions buttons.
    Regards

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  15. LinkDirectory said:

    Jun 29, 10 at 7:16 pm

    I am pretty sure that, this button has strong conversion possibility.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  16. pattaya said:

    Jul 09, 10 at 12:26 pm

    Good insights and cool buttons! Gonna use one on my website :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  17. PetSupplies said:

    Jul 19, 10 at 9:14 pm

    Thanks, these buttons are great. We went with the Red one since it really stands out. Finally something to overpower the massive Google Checkout and PayPal buttons! Hopefully we see an improvement in our shopping cart abandonment rate.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  18. Alan Jordan said:

    Aug 05, 10 at 6:46 am

    I agree with your descriptions. These are excellent buttons, and I plan to use them in several of my sites. I found your site when searching for a “proceed to checkout” button, and as a result of this offering, I plan to visit many more times.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  19. andy Ba said:

    Sep 27, 10 at 8:51 pm

    Love the buttons but having trouble selecting just one of those (like the blue one) Can I download just one of then instead of all 6. Sorry for such a basic questions

    Thanks

    Andy

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  20. TraiaN said:

    Sep 27, 10 at 9:38 pm

    you could just save the image on this post then crop it for your desire one, but I would recommend you a clean export from psd anyways.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  21. Star Carlton said:

    Nov 06, 10 at 9:35 am

    Thanks – I am going to use one of these on my sites.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  22. Jordan McClements said:

    Dec 15, 10 at 5:25 am

    Thanks very much for these.

    Much appreciated. The red one fits in very nicely with a client site that I am working with.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  23. Travis said:

    Feb 22, 11 at 7:59 pm

    Do you guys have the full package of these buttons for add to cart, etc?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  24. TraiaN said:

    Feb 22, 11 at 10:35 pm

    Travis, what do you mean by the full package? If you have a list of what you’ll need we could add it.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  25. Travis said:

    Mar 09, 11 at 4:26 pm

    thanks for the reply TraiaN! i was wondering if you’ve made a full package of these buttons such as Add to Cart, Continue, Back, More Info, etc. I’m using your checkout button which is great by the way, but it doesn’t match my other buttons. Thanks for your help!

    -Travis

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  26. TraiaN said:

    Mar 09, 11 at 5:52 pm

    Travis, just let me know what you’ll need and we’ll make them available to anyone.

    VN:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  27. Travis said:

    Mar 09, 11 at 6:46 pm

    the most important buttons for me to match would be the Add to Cart and Confirm Order buttons. having those would make the checkout process flow better with matching buttons. a matching button for Continue, Back, and Update would also complete the package. are you making these for people for free? if so, that is very generous of you. :)

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  28. Travis said:

    Mar 22, 11 at 7:55 am

    Were you bluffing? :) Wondering if you are still going to make more buttons. I could really use a Confirm Order button that matches what you made here already. Please let me know if you plan to make more. Thanks!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  29. TraiaN said:

    Mar 22, 11 at 4:14 pm

    Travis, the buttons are on our queue. Probably we’ll have them ready in another week or so.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  30. Phill said:

    Mar 24, 11 at 7:10 am

    Fantastic Thank you. Your buttons are great and the tips are helpful

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  31. Travis said:

    Mar 25, 11 at 7:12 am

    Thanks TraiaN! I’m using the orange and blue checkout buttons on two of my sites and they seem to be increasing conversions. Really looking forward to your new buttons!

    Thanks!
    Travis

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  32. TraiaN said:

    Mar 25, 11 at 11:47 am

    Travis, take a look at the updated post. I hope it helps!

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  33. Travis said:

    Mar 28, 11 at 8:53 am

    Nice work, those are pimp! I’ll try them out and see what happens! Do you have a link to the psd files for the new buttons? The links take me to just the checkout buttons.

    Thanks!
    Travis

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  34. TraiaN said:

    Mar 28, 11 at 9:21 am

    I have updated the link http://www.pitstopmedia.com/sem/downloads/ecommerce-buttons.zip

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  35. Travis said:

    Mar 28, 11 at 2:10 pm

    Thanks TraiaN! I’ll check it out!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  36. Keith said:

    Mar 30, 11 at 6:57 pm

    These buttons are great and the best I have seen. It has made my site look better than big name sites. I am already using all I can. Is their any way to have others made to complete my site? I eventually want to update the following buttons on my site using all the same style:

    Add Selected Products to Cart
    Estimate Shipping
    Listing
    Write a Review
    Tell a Friend About Us
    Back to Shopping
    Login
    Submit
    Update
    Back
    View
    Details
    Read the Reviews
    Edit

    Or is their a way to download a version that we can edit the text on? I know it is a lot that I want to update.

    Thanks in advance!

    Keith

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  37. TraiaN said:

    Mar 30, 11 at 8:47 pm

    thank Kevin. Actually you can download http://www.pitstopmedia.com/sem/downloads/ecommerce-buttons.zip and it contains the psd files, where you can modify them as you like. I you don’t have the skills to do that, let me know and we’ll help you with that.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  38. Keith said:

    Mar 31, 11 at 1:06 pm

    Thanks! I did try it on my own but I dont think I have the right program to edit the psd files correctly. If their is any way you guys can help with them I would appreciate it. I am sure others would be able to use them too. Also thanks for all the good blog posts. I have been getting some good information from it.

    Thanks,

    Keith

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  39. Roy said:

    Sep 30, 11 at 12:12 pm

    ….but your own research tells you -not- to use the “secure” words. I quote:

    Does the button contains anti-anxiety elements, such as the term “secure”?
    secure – 14 (12%)
    no – 96 (88%)

    Personally, I find stating “secure” to be a -reminder- that the web is not secure, and don’t find it reassuring at all. In this day and age, just having “Checkout” should be more than enough.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  40. Christopher said:

    Dec 08, 11 at 9:27 am

    IF you make the button burned orange it will be better..

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  41. Mat said:

    Jan 13, 12 at 2:24 pm

    Good quality buttons, stands out very well.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  42. Jeff said:

    Aug 22, 12 at 7:57 am

    Red represents stop, not move forward. When I see red I either think don’t move forward or error

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  43. Stewart said:

    Jan 14, 13 at 4:25 am

    Even now; over 4 years on from when this article was first published these still remain some of the best CTA buttons I have come across.

    The 3D effect of the button makes it look like a button but, another element could be a slight change in properties on hover – I always find this has a reinforcing effect that there is an action behind the button.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  44. Traian Neacsu said:

    Jan 14, 13 at 12:46 pm

    Thanks, Stewart. You are right, the hover effect should be there, but for many who download the buttons implementing them it will be tricky – many will simply update the text and place the button on their website.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)