Your buttons may call users to act, but do they compel users to act? Buttons can come in different shapes and forms, but a button isn’t effective if it doesn’t compel users to take action. The more clicks your call to action button gets, the higher chance you have at converting your users into customers. There are best practices that can help turn your call to action buttons into compel to action buttons.

Use gradients, shadows & rounded corners to make it look real

It’s no secret that the more real your buttons look the more users know will know to click it. Using gradients, drop shadows and rounded corners on your button will make it look like a three-dimensional button that users can press. Users press buttons all the time throughout their daily life. So when they see a realistic looking button on your website, they’ll instantly know what to do with it.

Use high contrast colors

Colors aren’t used just for decorating a website. They play an important role in grabbing the users attention. A compelling call to action button is a button that users can spot instantly. The key to making your buttons easy to spot is to use high contrast colors. The color of your button should contrast with the text color on your button, as well as the background color it’s on.

Make it big, but not too big

Color isn’t the only thing matters. Size matters too. The bigger your button is, the easier it is to spot. When you increase the size of your button, you should increase the text size in it as well. This won’t only make your button easier to spot, but easier to read. However, avoid making the button too big. If it overshadows the content that supports your button, it’ll distract users from their task.

Use words that create a sense urgency and immediacy

Words that create a sense of urgency and immediacy are more likely to compel users to act. Adding certain words like “now”, “today”, “instant” or “quick” to your button text can make a huge difference in your conversion rate. What this does is create tension and excitement in the user’s experience. Emotion plays an important role in both marketing and design.

Soften your action words

If user’s don’t know much about your product, it’s highly unlikely they’ll buy it without trying it first. Many websites ask users to buy their product on the home page before users see what the product is about. This is a sure way to get users to avoid your button. Don’t put all your chips in one basket right away. Soften your action words and allow users to try a demo or browse the features before you ask them to buy.

Use title case with 1 or 2 words, sentence case with 3+ words

Most people don’t pay much attention to text capitalization on their buttons. The difference it makes might seem small, but it still affects users. When your call to action is 1 or 2 words, using title case can make your button text feel like a command. When your call to action is 3 words or more, using sentence case can make your button text feel like a dialogue. All of which, can make clicking more comfortable for users.

Add an affordance arrow or icon to it

There are a couple of ways you can illustrate your call to actions to make it compelling. One way is to add an affordance arrow to the button to make it feel like an action. The arrow signals to users that the button will take them somewhere. Another way is to use an icon that describes the action. When users see an icon that matches the action, they’ll feel like they’ll get what they’re clicking.

Add a hover effect to it

A visual change when the user hovers their mouse over the button can compel users to click it. Changing the color brightness of the gradient is a good way to get users to click your button. At the very least, the mouse cursor should change from the usual arrow to the pointing hand. This is a standard cursor convention that lets users know what they can click.

Place it above the fold & below the fold

If your page allows for scrolling, it’s good to have your call to action button above the fold and below the fold. Users will typically spend most of their time above the fold, however, most users will eventually end below the fold. Having a call to action button below the fold helps users remember why they’re on your site and what they need to do to get what they want.

A button that calls users to act is easy to design. But a button that compels users to act is one that takes some careful thought and understanding. These best practices will guide you as you design your buttons. If you want to know what more you can do to increase the conversion rate of your buttons, do A/B testing to see which version of your button converts the best.

Love the article and you made some great points, i disagree however with your color choice on the “Call to Action Button”, Red is almost always associated ( At least in the US ) with errors, problems, and stop signs. Making the button a color like Green, or Orange would be a much better choice.

This doesn’t mean that red is the best color to use for buttons. It simply means that a high contrast color is better than a low contrast color for call to action buttons. See best practice #2 in the article.

Hi great post but it would it not have been better to use a slightly softer colour like orange, rather than the red. I have always thought that red indicates danger where as orange gives the same prominence to the button without that warning element.

Nice article. I allready have very good experience with Buttons. It is very important to use Buttons because some users stay only 2 seconds on the website. A button is a good way to get more attension.

Thanks for the tips Anthony, I really liked the way you progressively illustrated each point with a new button, “improving” the button as you introduced more tips. I’m sure I’m not the only one who found it very difficult not to try and click on each button, they were that compelling! Will bookmark and keep as a reference for sure

Hi Anthony, you have some really great pointers on CTA-buttons, simple to implement and to the point. Maybe your readers would find my latest article about color psychology and how it affects our decision making on CTA-buttons worthy of reading as well. You can find it here:http://www.paulolyslager.com/call-to-action-buttons-psychology-color

I was never able to replicate the green button performance for our sister company Chemistry.com.

Two things that really stand out with the Chemistry.com tests are:

1) The primary colors on Chemistry.com (at the time) were red and white 2) The button color that performed the best was …………….RED

I only ran the test three times at Chemistry, and it was in a multivariate test; but each time the color that worked the best was RED – albeit it only outperformed the control (green) by 1% and other variables had higher contributions, it was significant.

Here’s the scoop – test, test, and test again. I always evangelize that generally, amongst all of my research (primary and secondary) that green buttons work the best, but it’s obviously never a rule. The simplicity of the page and USP, and proximity of the USP to the button are also important (not to overlook the aforementioned tips and/or to forget to mention branding considerations).

I will also add that the words in the button, generally, will add a much larger lift than the color. I won’t say how much, but I hear there are some unauthorized publications of presentations I’ve done on this subject on the internet somewhere…