A Comprehensive Guide on How to Create an Effective CTA Button

A Comprehensive Guide on How to Create an Effective Call to Action Button

Did you know that just changing the color of the Call to Action (CTA) button can increase the conversion rate of a website by 35%? Is it worth placing a button above the fold line or at the bottom of the page? How do you change the text on the button to increase its efficiency by 68%?

We collected more than 10 interesting case studies and prepared a complete guide on how to create an effective Call to Action button to increase the conversion rate of your website. We will analyze what CTA buttons are and show how to place them correctly on your website, insert the necessary text and choose the most effective design.

Let’s start with the theory.

What is a call to action button and what four things are important to know about it?

The Call to Action (CTA) button is a graphic element of the website that prompts the user to perform some kind of targeted action. Examples include register, subscribe to a newsletter, buy, download, upload a file, etc.

Push the CTA!

Push the CTA!

There are several types of CTA buttons:

  • An interactive button with a text that tells you what will occur after it is clicked: “Download a book”; “Get a discount”.
  • A button that sends a visitor to another page, for example, with detailed information about the product: “Learn more”.
  • The button as a part of the lead form. It helps to bring the data transfer process to its logical conclusion: “Send”, “Subscribe”. The user clicks them after filling in all the fields in the form.

When choosing a CTA button for your website, you need to take into account at least four main points:

  1. Where to place buttons;
  2. What design to choose;
  3. What to write on the button as well as above it and below it;
  4. How often to use CTA button on the page.

We will answer all of these questions further in the article to help you to create the most effective CTA button for your website.

Where should I place CTA button to maximize efficiency?

That’s what the problem is:
When the user is not familiar with your proposal, where should you place the main CTA button – above the fold line or at the bottom, as the logical end of the webpage?

When should the CTA be placed above the fold line?

This solution seems risky because you are asking the client to click a button just after they arrive. Nevertheless, this approach is justified, if:

  • You have a “hot” lead, who already knows your product and learned about it elsewhere. For example, you are bringing users to the landing page from your subscriber base to offer a product discount.
  • You have a “warm” lead, if the first screen is designed as a mini-version of the landing page.

Six rules for placing CTA above the fold line

  1. A short headline to attract the client’s attention;
  2. An auxiliary headline that explains the point of your proposal;
  3. A photo or video that clearly conveys your proposal;
  4. A review of benefits;
  5. Social evidence and triggers;
  6. “Call To Action” button that describes what the client will receive.

This is the formula from Unbounce for the effective operation of CTA on the first page spread.

The structure of the first webpage screen, for the effective call to action button

The structure of the first webpage screen, for the effective call to action button

How can the placement of the CTA at the bottom of the webpage increase the conversion rate?

Buttons at the end of the webpage work better when you need to inspire confidence and give the user more information for making a decision. Such pages should be built according to the AIDA model:

  • Attract Attention (the headline is usually answer for this),
  • Hold attention through Interest (list the benefits to the client),
  • Arouse Desire (make a tempting offer), and
  • Call for Action – that’s where you need a good button.

A case study from ContentVerve proved that the CTA’s location at the end of a page, but not at the beginning, can increase the conversion rate by 304%. The research task of the study was to find out which option would be more effective: the CTA being above the fold line or below it.

They just moved the form with the button to the end of the page and raised the conversion rate by 304%.

They just moved the form with the button to the end of the page and raised the conversion rate by 304%.

From the above, there’s a logical conclusion:

  • If your product or service is already familiar to the client, place the CTA button above the fold line asking for a simple, targeted action that does not take much time to decide on.
  • If you have a complex product or service, and a potential customer needs to digest a lot of information in order to make a decision, place the CTA button after all the information about the product, as well as advantages and trust triggers, has been presented.

KISSmetrics has created a diagram to show how CTA button placement depends on the complexity of the product or service:

The simpler the product, the earlier you can place the button. The harder it is, the lower it should be.

The simpler the product, the earlier you can place the button. The harder it is, the lower it should be.

What is the most effective call to action button design?

To choose the right CTA design, remember these five principles:

1. Make the button contrast

The point here is not just color; the button must be noticeable against the background of the other elements of the webpage.
Here is a curious case from the company RIPT Apparel. They conducted A/B testing of CTA buttons and compared the efficiency of an inconspicuous black button and a contrasting green button.

After changing the button's color to green, the conversion rate of the website grew by 6.3%.

After changing the button’s color to green, the conversion rate of the website grew by 6.3%.

The button text color can also affect the conversion rate. So, as in the next case, replacing the black text with yellow made the button less efficient.

By changing the text color, the conversion rate fell by 18.01%.

By changing the text color, the conversion rate fell by 18.01%.

2. The button should look like a button

A flat and inconspicuous button can be mistaken as a design element. Do not neglect effects such as color changes or the appearance of a shadow when you hover over the button – this tells the user that the item is clickable.

Читай также:  Case: How to increase application downloads by 14.2% using a new android app icon design

A practical example: on one website, the button color was changed from blue to green, and the corners were rounded. The button became brighter and contrasted better against a gray background. It looks more like a button.

3. Button size matters

A button that is too small will not be noticed, while one that is too big will not be recognized as a button. In the example below, the button size was increased, leading to a 10% conversion rate loss.

Bigger doesn’t always mean better.

Bigger doesn’t always mean better.

Here’s another case where changing the button design increases the CTR on a commercial website.

The narrow brown button with the image of the envelope was replaced with a brighter orange one and with the image of a green arrow. It was also increased in size. As a result, the CTR doubled.

The narrow brown button with the image of the envelope was replaced with a brighter orange one and with the image of a green arrow. It was also increased in size. As a result, the CTR doubled.

4. Use special elements to attract attention

Contrasting, attention-grabbing arrows, as in the previous example, can work for you. And in the following case, when the arrow was removed from the button, the conversion fell by 12.29%.

The arrow turned out to be an element that attracted attention and made the button more noticeable.

The arrow turned out to be an element that attracted attention and made the button more noticeable.

5. Use negative space

You can make the button more noticeable with the help of so-called negative (empty) space.
A good example is on the Dropbox home page.

The button is clearly visible against the background, not only due to the contrasting color, but also due to a sufficient amount of empty space around it.

The button is clearly visible against the background, not only due to the contrasting color, but also due to a sufficient amount of empty space around it.

What should I write before the CTA button, on it and after it?

Changing the text on the button can seriously affect the conversion rate.
In the following example, we compared two CTA buttons with different text. A user of the renting premises website who wanted to get more information about the facility had to click on the CTA button to get details on the mail. Two versions of the CTA buttons text were tested: “Order information” and “Get information.” The second version worked 38.26% better.

In the second version, the text on the button better explained what would happen after clicking.

In the second version, the text on the button better explained what would happen after clicking.

Another curious case concerns replacing the button on the website with articles. Unregistered users can read only part of the essay on the website. To read the full essay, you need to click the button and register. In the course of the experiment, two buttons were tested: “Read Full Essay Now” and “Get Instant Access Now.”

The conversion rate of the first button was 39.03% higher than the second.

The conversion rate of the first button was 39.03% higher than the second.

The first button conveyed not only the value, but also the relevance of the proposal. This is what the user wanted to do at the time of reading the essay – finish reading it.
The text on the button should convey not only the value of the sentence, but also its relevance.

Here is one more example of how more relevant button text can increase the conversion rate. Two variants of the button text for a gym website were tested: “Get your membership” and “Find your gym & get membership”.

The second button worked better by 68%.

The second button worked better by 68%.

It turned out that the location of the gym for its clients was of prime importance, so this more relevant message raised the conversion rate.
The text that you write before and after the button can also help you tell the user what benefits they will get after clicking the button. This will allow you to avoid putting a lot of text on the button itself, keeping its design neat.

The header describes the benefit that the user wants to get, the subtitle offers explanations of what happens when the button is clicked, and the CTA button has a single, clear sentence. That is the ideal formula.

The header describes the benefit that the user wants to get, the subtitle offers explanations of what happens when the button is clicked, and the CTA button has a single, clear sentence. That is the ideal formula.

To attract attention to the CTA button, you can also resort to additional visual effects; for example, have arrows from the area above or below the button point to the button itself.

The webpage briefly lists the advantages of the service. From there, the arrows direct the user's view to the button.

The webpage briefly lists the advantages of the service. From there, the arrows direct the user’s view to the button.

You can place help information on the button itself. Sometimes one such clarifying word can make the entire message more understandable and increase the conversion rate.

In this example, the main text on the button is written in a large font: "Free Trial". The fine print specifies that a credit card is not needed. This move negates the client's fear of spending money on an unfamiliar product.

In this example, the main text on the button is written in a large font: “Free Trial”. The fine print specifies that a credit card is not needed. This move negates the client’s fear of spending money on an unfamiliar product.

As you can see, for a higher conversion rate, you need to select button text that:

  • will explain to the user what happens after clicking the button,
  • will convey the value of your offer, and
  • will be relevant to the user’s situation.

In this case, you can place these messages above and below the button, and also use arrows and other effects to steer the user’s view toward the desired text.

How often should you insert CTA buttons?

If you give most people many options, they won’t be able make any choice at all. For example, the abundance of CTAs on this page confuse the user.

On this website, there are so many design elements and buttons that you get lost and don’t know where to click.

On this website, there are so many design elements and buttons that you get lost and don’t know where to click.

Specify to the user on the webpage one particular path and, at the end offer, one target action. If there is a need to suggest several variants of the development of events, focus on one main CTA button. The rest will be made less noticeable.
For example, Reddit makes the registration button brighter than the login button.

The transition to the old version is hardly noticeable at all.

The transition to the old version is hardly noticeable at all.

In the following example, the emphasis is on the “Create a Wiki” button, but the other two buttons also grab the user’s attention.

The more choices you give the user, the less likely he or she will do it.

The more choices you give the user, the less likely he or she will do it.

The experience of DrExplain showed that you should not have a few buttons on one spread of the screen. Removing one of the CTAs increased the conversion rate by 26%.

Initially, they invited visitors to download and buy their own product.

Initially, they invited visitors to download and buy their own product.

Then, they invited users to just download it for free. This increased conversion.

Then, they invited users to just download it for free. This increased conversion.

In order not to overdo it with the CTA, follow this simple formula: one screen height, one CTA. If there is a need to place several CTA buttons, make the main one contrast more, and the rest less noticeable; for example, by using links, not buttons.

Now you know how to create a call to action button that will help you to generate more leads.

How effective are your CTA buttons?

Check your CTA buttons’ effectiveness on your website by using this checklist:

  1. Is there a CTA button on the first screen? If so, are you following the six rules for organizing such a screen?
  2. Is the CTA button visible on the page turn? Are there any other elements on the webpage that are concurrent with it and can take away from the user’s attention?
  3. Does the design of your button show that it is clickable? (e.g., by changing the color when hovering, adding a shadow, etc.)
  4. Does the CTA convey the value of your proposal?
  5. Is it clear to the user what happens after clicking the CTA button?
  6. Is the text of the CTA relevant?
  7. Does the text before the button agree with the text on it?
  8. Do other elements distract the user on the way to the CTA?
  9. Do you have several CTAs on the webpage with different messages? Is the main button highlighted among them?
  10. Do you use additional elements to attract attention to the button?

If the answer to all 10 questions is “Yes”, then congratulations! If not, you already know what to do.
We wish you a high conversion!

Leave a Reply