Could This Be The Best Checkout Button?

Published: October 3, 2008

Updated: August 8th, 2020

Are you 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 was not. I identified eight design elements for something just as “simple” as a checkout button. And there may be other elements that I missed as well, so please feel free to contact me if you have any comment, or you want to share your thoughts.

I want to share with everyone what I believe is one of the best checkout button, based on the 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.

Let’s get started.

The 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 the 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 the color and size, keep in mind the color scheme of the page. The button should provide a good contrast with the overall look and feel of the page. It’s also better to place it above the fold, and it should probably be the most visible element on the page.

The elements of a checkout button

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.

If you decide to use these buttons on your site, let me know how they performed. Any attribution pointing to this website is also appreciated.