Call to Action Button Designs That Convert Website Visitors to Buyers

Within this article, you will find good advice revolving around your “Call to action” button. Some of the advice is a basic for the sake of people new to web design and “Calls to action,” and to remind experts that the basics matter. Some of the advice is a little more advanced but is written in a vernacular that even laypersons may understand.

How does the size affect its page prominence and impact?

The size of your “Call to action” button needs to match your website design. If the content of your website is thin then a larger “Call to action” button may be acceptable. If you have a lot of content on your page then a smaller “Call to action” button is going to be buried in the content. But a larger “Call to action” button on that page would look out of place. That is why it may be a good idea to put more than one “Call to action” button on a content heavy page. Try to put them at the end of wherever the eye is lead.

Make it too big and it will look like an image

If a “Call to action” button is too big then a user will automatically assume it is a link to another website or an image. You are allowed to create bigger calls to action if they explicitly say that they are call-to-action links. If they do not, for example if they say, “Buy now” or something similar then people will assume that they are just images. People expect their “Call to action” buttons or links to be of a reasonably small size.

Is the color appealing, boring or threatening?

The color of your “Call to action” button is going to have some sort of emotional response attached to it. A blood red call to action that is shadowed with black or darker red is going to come across as threatening. A “Call to action” button that is caterpillar green is going to come across as dull. A dark blue may come across as authoritative or trustworthy, depending upon your user’s cultural upbringing (for example, the Chinese see red as lucky not threatening).

Is the color passive or does it demand attention?

This is a difficult question to answer because many things determine if the button is passive or attention grabbing, such as the shape, background, size, text, font, etc. As a rule, try to keep the “Call to action” button similar to your brand colors, but a stark contrast to your background color (however, the opposite technique can work).

PayPal made the brave move of making their calls-to-action dark yellow. It is dark enough to stand out against their white background, but is in-fact a stark contrast color to their dark blue brand colors. As a result, their 

Does it stand out from the background?

Obviously, making your “Call to action” button stand out in a flashy and offensive way is a mistake made by amateur designers, but being too conservative is a mistake too. You need to find a happy medium between being sexy and flashy like Las Vegas and being cultured and refined like San Francisco.

Does the shape fit into the page design?

This question may seem nit-picky, but you would be surprised how many people put a star shaped “Call to action” button on a modular and boxy web page. You would be surprised how many square “Call to action” buttons exist on websites that are built on circular designs.

Do not go out of your way to match web page shapes with your “Call to action” button, but make sure that the two are not at odds. For example, a web page that is boxy and modular will often look good with a rectangular “Call to action” button that has round edges (like a pill). A distended oval shaped “Call to action” button often looks good on websites with a circular design so long as the text does not look out of place on it.

Does the shape look like a “Call to action” button or an image?

For example, a box shaped “Call to action” button is often mistaken for an image because people are used to seeing images in boxes. Round “Stop” and “Go” buttons are also often mistaken for links or images, instead of being recognized as “Call to action” buttons.

Where it is placed on your page?

The “Call to action” button’s prominence on the page is one thing, as is its contrast from surrounding content. It needs to stand out enough so that a user does not have to search for it, but cannot be so imposing that it puts a person off. Some marketing agents would say that a call-to-action should scream at a user, but this is an old technique that has its day. A good and salable web page should be so convincing that the user starts looking for a “Call to action” button.

Is the language used on the “Call to action” button correct?

If you are selling something then does its text fall in line with your adverts sentiment. Are you selling high quality goods and following your advert with a “Call to action” button that says, “Cheap prices only a click away”.

Does the “Call to action” button look like a malware download?

People are used to seeing download adverts that cover for malware downloads. It is up to you to know what they look like and to avoid their design at all costs. You cannot afford to have your “Call to action” button look dubious in any way.

Can you make the “Call to action” button look more familiar?

People like what they already know, so if you can create a “Call to action” button that looks like the button of another “Call to action” button, then you present the users with something they feel safer clicking. This safety around familiarity is the same reason why the shopping cart symbols of so many websites are eerily similar.