How to Create an Effective Call-to-Action Button

Imagine that you own a brick-and-mortar store with tons of great products, but once customers come in, they’re unable to find the register they need to go to in order to pay for their purchases. As a result, they walk out without buying anything.

As far-fetched as that scenario may sound, your ecommerce site is essentially a store without a register if you don’t make your call-to-action buttons easy to find and understand. Consumers want sites where they can shop easily – with the click of a button. If they can’t do that on your site, they’ll quickly move on to a competitor.

What Is a Call-to-Action Button?

There are actually quite a few different types of call-to-action buttons, all of which serve different purposes. Here are a few types you may encounter:

Purchase Buttons. These buttons will usually say things like “Buy Now” or “Add to Basket.” When a web user clicks it, an item will either be added to their virtual shopping cart or, if they are proceeding straight to check out, they’ll be taken to a page to enter shipping and billing information.

Sign Up Buttons. Generally, these buttons will either prompt users to sign up for something like a newsletter or to use a paid service offered by the site, such as video streaming.

Trial Buttons. Offering a free trial can be a good way to let users see if they like your product before they commit to buying it. If you have this kind of offer on your site, you should make sure you have a highly visible call-to-action button saying something like “Start Free Trial.”

Download Buttons. This type of button often looks slightly different, in that it often includes additional information about the download underneath the initial call-to-action. For example, the button might say “Download Now” in a larger font and then state the size of the download and the system it is compatible with in a smaller font below.

Learn More Buttons. Because you shouldn’t cram too much text on a home page or landing page, you might opt to post a brief paragraph to hook the reader and add a “Learn More” button below that so that they can continue reading if they choose.

Best Practices

Use negative space to your advantage. The last thing you want to do is cram a call-to-action button in the corner of a cluttered web page. Instead, set your call-to-action button off against negative space. For example, if your background is white, you might choose a bright color like red or green for your call-to-action button and place it right in the middle of a block of white space.

Embrace the rule of thirds. If you have a background in graphic design or photography, you probably already know all about the importance of the rule of thirds. For those who aren’t familiar with this rule of thumb, it involves dividing an image (or web page, in this case) into nine equal parts using two equally spaced horizontal lines and two equally spaced vertical lines. Important components of the page should lie along these imaginary lines or their intersections in order to most effectively draw the viewer’s eye.

Balance size with page’s content. Choosing the size for a call-to-action button is a careful balancing act: make it too large and it will draw the reader’s eyes away from other important information on the page, but make it too small and it will get lost in the shuffle. Play around with the size of your button until you get what looks like a good fit.

Incorporate more color to stand out. If you’ve used two colors for the overall theme of your page, try using a third color for the call-to-action button to make it stand out even more. Just make sure that the color complements or nicely contrasts the rest of the page rather than clashing with it.

Stick to straightforward language. You’ve got limited space within your call-to-action button and only a very short time to grab your potential customer’s attention. Use direct, concise phrases like “Buy Now” or “Add to Cart” in order to prompt the site visitor to take action and to ensure that they understand exactly what will happen if they click the button.

Prioritize if you have multiple buttons. Let’s say that you have a couple call-to-action buttons on your page: one that says “Start Free Trial” and one that says “Learn More.” While you want to give site visitors the opportunity to research your product, you probably care more about the fact that they start a free trial. In order to make your free trial button stand out more, try tricks like placing it above the “learn more” button, making it slightly larger, or even using a brighter color.

Add icons. Although it might not be the right fit with every type of design, adding a small image to the corner of your call-to-action button may be a good way to draw the reader’s eye and reinforce the idea of what you want them to do. The small shopping cart image in the corner of Amazon’s “Add to Cart” button is a good example of this; it’s an image that people immediately associate with shopping, so it helps clarify the purpose of the button.

It might take some trial and error to make your call-to-action buttons as effective as possible, but it’s certainly worth putting the work into. While call-to-action buttons may not seem like a huge deal, they’re one of the most important elements of your website.