How to Attract Attention with a Call-to-Action Button

December 2018
call to action button concept art

A call-to-action button can be your most powerful tool when it comes to increasing your website’s click-through rate. Whether it’s a download button, a subscribe button, or an add to cart button, your call-to-action button should be designed to stand out and prompt your audience to click. An effective call-to-action button will seal the deal in converting your visitors into customers, so here are three areas to consider for designing a call-to-action button that converts:

  1. Choose a contrasting color
  2. Positioning
  3. Choose your words carefully

Choose a contrasting color

Red, green, or orange?

Nothing attracts attention like a big red button.

Many often argue that red, green, or orange are the best choices of color for a call-to-action button. It makes sense—red creates a sense of urgency, green is associated with “go,” and orange represents energy and enthusiasm. While each of these can be an effective choice,  there is no “right” color to choose. What’s more important is making sure that the color stands out.

Luminance contrast

Although Starbucks’ button isn’t using the most eye-popping color, its luminance contrast against the background makes it stand out nicely.

According to NASA, the most important aspect of choosing a color for usability is luminance contrast. Luminance is a measurable quality most closely associated with brightness, and luminance contrast is the difference between the luminance of an object and the luminance of its background. This means that more important than color choice is that there is a strong luminance contrast between your call-to-action button and its background. Similarly, you want to make sure there is also a strong luminance contrast between the button and its text. In doing so, you maximize the attention that is drawn to your button.


Above or below the fold?

Bloomberg uncommonly features their subscription buttons below the fold, but it is effective as they have multiple options with lots of information.

Eye tracking research shows that people most commonly scan webpages in an F-shaped pattern. The first thing a user will do when they access your site is read in a horizontal pattern across the top of your content. That means you should always place your call-to-action button there, right? Well, not necessarily. Placing your button where the user can see it before they even need to scroll down usually proves to be the most effective, but in some situations you may find that placing it below the fold yields better results. Particularly, if the user is required to read a lot of information before making a decision, it may be smarter to position your call-to action button below your content.


While there’s a few popping colors on Firefox’s landing page, the call-to-action button’s whitespace helps it stand out.

No matter where you choose to place your call-to-action button, make sure it has plenty of whitespace. Sufficient white space around the button will help it stand out, drawing the user’s attention. However, be careful with the amount of whitespace you use: the more whitespace between your button and its related content, the less connected they seem. If you have content that convinces users to click, then you should still keep your button close to that content -- just remember to give it some breathing room.

Choose your words carefully

Less is more

Short and to the point—plus it’s free!

As the name suggests, your call-to-action button should get users ready to act. Accordingly, the button’s text should be short and to the point. Keeping the button’s text clear and easy to read will allow users to recognize the button and what it reads at a glance. More importantly, if you choose these words carefully you will increase the button’s impact, prompting the user to act before they get bored of reading and move onto another site. However, remember that your button should be relevant to your target audience, so there may be some important words that shouldn’t be sacrificed for length. Understand your target audience, and make sure to include the information that they are looking for.

Use effective words

It’s orange and has the words “Free” and “Today” -- Change “Your” to “My,” and you’ve got yourself a perfect call-to-action button.

Having less words to work with means that your word choice is all the more important. One word can make a difference, so it is essential that you choose persuasive and powerful words to get an emotional reaction out of the user. Buffer suggests 189 powerful words and phrases that convert. In addition to inspiring users, your word choice should also create an urgency to click. Timing words such as “now” or “get started” are always a great choice to stir users into action. The use of first-person pronouns has also been shown to increase click-through rates. This not only creates a personal connection, but it also makes the user feel as if they are in control, rather than as if they were just being sold something.

Lastly, with whatever choices you make for your button, make sure to put it through A/B testing to be sure that they’re the best option.. Whether you’re trying to get somebody to buy a product or just subscribe to a newsletter, a well-designed call-to-action button is often the best way to get users to take action. Take these tips, and make your buttons irresistibly clickable!


Keep Reading

Browse All

Subscribe for the Latest

Want to stay in the know with all things Responsival? Sign up for our newsletters, we promise we won't email you too often!

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.