How to Design Compelling Call to Action Buttons

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

Make it look real

The more real your buttons look the more users will click it. Gradients, drop shadows and rounded corners can make your button look 3D. Users press physical buttons all the time. When they see a realistic button on your site, they’ll know what to do.

Use high contrast colors

Colors play an important role in grabbing user attention. A compelling call to action button is a one that users can spot instantly. The key to making it easy to spot is to use high contrast colors. Your button color should contrast with the text color of your label.

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 increase the label size as well. This will make your button easier to read. Avoid making the button too big. If it overshadows content could distract users from their task.

Use words that create a sense urgency

Words that create a sense of urgency and immediacy are more likely to compel users to act. Adding words like “now”, “today”, “instant” or “quick” to your button label can increase conversion rate. This creates tension and excitement in the user. Emotions play an important role in getting users to act fast.

Soften your action words

If users don’t know much about your product, it’s unlikely they’ll buy it without trying it. Many sites 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 features before you ask them to buy.

Title case with 1-2 words, sentence case with 3+ words

Most people don’t pay much attention to title capitalization on their buttons. This small difference can affect conversion rate. When your call to action is 1-2 words, title case can make your button label feel like a command. When your call to action is 3 words or more, sentence case can make your button text feel like a dialogue. When your button label is in the right case, you make users more comfortable to click.

Add an affordance arrow or icon to it

There are a couple of icons you can add to your buttons to make it more compelling. One is an affordance arrow that signals to users the button will take them to where they want to go. Another is to use an icon that describes the button action. This will make users feel like they’ll get what they want.

Add a hover effect to it

A visual change when the user hovers their mouse over a button can compel users to click it. Changing the color brightness of the gradient is a good approach. The mouse cursor should also change from the arrow pointer to the pointing hand.

Place it above and below the fold

If users have to scroll your page, it’s good to have your call to action button above and below the fold. Users will spend most of their time above the fold, but will end below the fold. Having a call to action button below the fold leads them to act when they finish the page.

Compel to Action Button

A button that calls users to act is easy to design. But a button that compels them to act is one that requires careful thought and design. These best practices will steer you in the right direction. If you want to know what more you can do, test different button versions on your users.



elegant wordpress themes

This Post Has 25 Comments

  1. Stuart Lawson Reply

    Great post, (as always) thank you! I’ve heard that orange and green are high conversion colors as well to use.

  2. Mark Haller Reply

    Great article, thank you.

    So simple to follow as well – a prescription for buttons 🙂

    Bookmarked and will be used frequently as a reminder, I think!

    Thanks for sharing 🙂


  3. Jordan Whalen Reply

    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.

  4. Rory Reply

    Great tips for Call to Action Buttons Ant

  5. Bogdan Pop Reply

    @stuart: red and green doesn’t necessarily imply a higher conversion rate. It depends on contrast, product, target audience and culture background and many other factors.

    @Anthony: I agree with your ideas but sometimes is better to get out of norm, break the rules, in order to achieve even higher conversion rates.

    10 years ago there were no big chunky call to action buttons. They are just a trend until something even better comes up

  6. Douglas Baldan Reply

    Great post.

    And yeah, as far as I know, green is the color with best conversion.

  7. HTML Codes Dude Reply

    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.

  8. Webanddesigners Reply

    Useful article. Should alwayz use these guidelines. Thanks

  9. coda Reply

    You said “fold”… *snigger*

  10. Chris Reply

    Love it! And I love the site…. just stumbled across it.

    I’m looking to start taking my designs up a level by doing some wire framing to improve my process/results, and focus on UX will be huge for me.

    “Compel to action” – that’s awesome.

  11. Bob Goodman Reply

    You have put forth some valuable information here. There are many ways to experiment such as size, color and shape of the buttons. One size does not fit all.

  12. Anton Reply

    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.

  13. abdulsala almekhlafi Reply

    Very good article and amazing

    Thank you so much

  14. Brendan Rice Reply

    Really good post. There is some great advice in there about call to action buttons. I had a go at writing about calls to actions as well your reader may find it relevant:


    Paul Boag also has a good blog post on the subject:


  15. Harsha Reply

    This is a very good resource and also useful for most of the users,

    So sim­ple to fol­low as well — a pre­scrip­tion for but­tons

    Book­marked and will be used fre­quently as a reminder, I think!

    Thanks for shar­ing 🙂

  16. Tracy Macfarlane Reply

    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

  17. Bijuterii Argint Reply

    It’s so much easier in Enghlish, the words are smaller. In other languages you have to write a whole sentece to have the same meaning.

  18. Paul Olyslager Reply

    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:

  19. Skylar Grey Reply

    Thank you for all of these great tips, Anthony. It’s easy to “hide” your CTA buttons if you don’t follow these guidelines.

  20. Jim McDonald Reply

    Oh – the crazy button color conversation. I ran numerous multivariate tests at Match.com (100+) and here is what I discovered:

    Green buttons out-performed other colors significantly (for Match.com) – by 3+% points (99% confidence level)


    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…

    Good stuff; glad it’s being discussed.

  21. LarimarMedia Reply

    The colour of CTA should be used only once in all page? You’re mixing this colour with some other buttons or elements on the page?

    Best Regards

  22. Aswin Reply

    What about showing the CTA only when you hover on that element? for eg. http://bit.ly/1FyJFqs

  23. Lars Gyrup Brink Nielsen Reply

    Funny reading about making it as realistic as possible, using gradients, drop shadows, etc. and “make it big, but not too big”, considering the trend that has been going on for the past three years about minimalism and – especially for CTAs – very large buttons.

Leave a Reply

Your email address will not be published. Required fields are marked *