What Is An Action Button

In this article…

What Is a Call to Action Button?
Why Are Call to Action Buttons Important?
How to Create a Call to Action Button
Tips for Creating a High-Converting Call to Action

While it may be small, the call to action button on your website is arguably one of the most important elements on the page. It encourages people to continue reading more of your content, download your eBooks or white papers, sign up for your webinars, or buy your products.

There are no shortcuts when it comes to creating a great call to action button. Optimizing the button and finding the right colors, design, and copy takes time and testing. Use the steps below as a guide to help you create a call to action buttons for your own site.

What Is a Call to Action Button?

A call to action button is a button on a webpage, advertisement, story, or piece of content that encourages visitors to take some kind of specific action. Commonly referred to as a CTA, this button helps businesses convert their website traffic into subscribers, leads, or buyers, depending on the goal of the content. The CTA button on a blog post may invite readers to review more blog posts, download a relevant eBook, or something else entirely.

A call to action button typically creates a bridge between the content that the website visitor is currently viewing — the content they're interested in⁠⁠ — and something you have that's of higher value. This button can take a traditional or non-traditional approach to design, copy, and any other elements.

Why Are Call to Action Buttons Important?

The call to action button is essential, as it is the element on your website that's encouraging visitors to take a specific action. Without the call to action button — and specifically a button that is optimized for conversions — visitors may not know where to go for more information or to make a purchase. The call to action button has a direct impact on a company's conversions and⁠, ultimately, its revenue. Nor do they have to be complicated. Here's a simple example of what a call to action button could look like and how it clearly articulates to website visitors what they should do:

Schedule a FREE Call CopyPress Screenshot

Image via CopyPress

How to Create a Call to Action Button

To make the transition from your copy to the action you want the website visitor to take, you need to create a highly optimized CTA button. Here are the basic steps you can take to create a call to action button:

2. Choose a Great Color

The first decision you need to make when creating a call to action button is to select a color that will stand out in the location you place it. The most popular choices for call to action buttons are yellow, red, green, and orange. That said, there is no single color that converts better than others. You just need to ensure that it contrasts with the surrounding area. The least popular colors for CTA buttons are black, white, brown, and gray.

In addition to standing out from the page, the button must also be complementary to the other colors on the page. For this reason, the right color will strongly depend on your website's color scheme, background color, and existing design elements. Even after you have selected the color you like, be intentional about periodically testing different colors to see if you can improve your button's conversion rates.

2. Keep Your Design Simple

Testing has shown that the best call to action buttons are those who have a very simple design and very few frills. That often just means a simple background color and possibly a gradient with white font. This also means the surrounding background color should be simple, as well. The most popular background colors, in order of popularity, are:

White
Gray
Black
Blue
Green
Orange
Purple
Red

Ultimately, what website owners have found through testing is that the simplicity of the background surrounding the buttons allows the visitors' attention to be drawn to the colorful button and the easy-to-read white font on top of the button.

Don't be mistaken, though, simplicity doesn't mean boring. You can still use eye-popping colors and great copy to grab the reader's attention and get them to take action fast.

3. Use a Sensible Size

When it comes to call to action buttons, bigger isn't necessarily better. Yes, you want people to notice and click the button. However, if you make the button too large and it looks unnatural on the page, it may have the opposite effect and make website visitors hesitant to click it.

Size is especially important when it comes to mobile. If your button appears too large on a mobile device and takes up most of the screen, your mobile browsers won't want to click it. Because the average consumer spends 52.2% of their time on a mobile device, there's a strong possibility that they'll find you when they're browsing on their phone. If your buttons are too large, they may get in the way of clean design elements. If they're too small, they may be less noticeable or hard to click without the inconvenience of zooming in⁠, which most consumers won't make the effort to do.

As you're designing your buttons, check them on both desktop and mobile and optimize for both.

4. Give No More Than Two Choices

Ideally, you should really only provide one call to action button. However, if you do want to offer another option, limit the number of buttons to two. Here's a great example of how you can do this effectively:

Question Box with CTA Button

Image via NeilPatel.com

While there are two choices, one of the choices is actually phrased in a negative way. No one would ever honestly say they have all the traffic they want pointing to their website, so the idea of clicking on the button that says, "no, I have enough traffic," is uncomfortable for people.

Another instance where it's appropriate to have multiple call to action buttons is if you are targeting two different types of people on the home page. As an example, if your website has different products for men and women, you may want to have them click on different CTAs on the home page. As another example, if your company is targeting both property owners as well as consumers and wants to share different messaging with each group, two buttons on the main landing page are appropriate.

5. Make the Button Look Clickable

While you may think it's obvious to website visitors that a button is clickable, it's a good idea to drive the point home with some stylistic tactics. For example, your button should have:

A rectangular shape
Borders or clear boundaries
White space surrounding the button

Some companies even have buttons change color or add an effect when you hover over it to catch the eye and encourage a click.

6. Make Your Button the Next Obvious Step

Your button should be strategically positioned so that when the website visitor reads your copy, their eyes naturally go to the button as the next logical step after the headline and subheadline. For example, if you are using the copy on your landing page to tell your readers about something, the button should be the next logical thing to show that when you were talking about.

7. Keep the Copy Short

Studies show that high-performing buttons tend to have short copy. In fact, the highest performing buttons never use more than 12 words. Some companies even limit themselves to just 60 characters. A button that has too much copy becomes either too large or difficult to read. You want to tell the reader exactly what the next step should be, but in the fewest number of words possible.

8. Have Exceptional Copy

The copy that you include on your CTA button should be powerful. While it will, obviously, vary depending on the action you're getting people to take, there are a few rules you can refer to when you're writing your copy:

Use action words.Use unique, action words like dominate, own, or try, instead of the more traditional subscribe or download. For example, "Get It Now" is stronger than "Download Now."
Be positive.People tend to feel more optimistic — and more inclined to click ⁠— when they see words like, "yes." For example, your button could say, "Yes! I Want This."
Suggest value.While you should have communicated the value of your offer within your copy, your button should remind people of that value proposition. The word "free" is often used in button copy to convey to website visitors that there is no risk.

9. Create a Sense of Urgency

It's a widely known fact that creating urgency with your marketing can help improve your conversions. You see this strategy regularly in email marketing with subject likes like, "25% off today only." You can apply this same strategy to your call to action buttons as well. The simplest way to do this is to add a countdown timer above or below the button, letting them know the option is limited.

You can also create urgency by promoting a product as new. In other words, the product won't be new for long, so you can encourage people who are loyal to the brand to invest in the latest product. There may not be a countdown timer involved, but there still is a fear of missing out.

10. Select the Right Location

Location is everything, whether you're talking about real estate or call to action buttons. Even if you have the right design, you may miss out on conversions if you don't put the button in the right location.

That said, there is no such thing as the right location for a CTA button. Marketers will commonly tell you that it should come above the fold on your website. In other words, it should be placed high enough on the page that website visitors don't have to scroll to find it. However, that doesn't necessarily mean the practice will work for you. The only way you can really determine the best location is to test different locations and see how your conversions change.

Tips for Creating a High-Converting Call to Action

Here are some tips you can use to help you create a high-converting call to action button for your website:

A/B Test Everything

As a general rule, you should always be testing parts of your website to see if you can make improvements in conversions. However, the CTA button is an incredibly easy part of your site to text, since sometimes only a small change in the copy or change of color can have a massive impact on your conversions.

Take Matthew Woodward for example. He decided to test how different button colors affected the click-through rate on his website. He took the original CTA button, which was green, and then put it up against four other colors: red, blue, purple, and orange. He ran nearly 8,000 visitors through the test and found that combination two, green on red, had a conversion rate of 52.25%, which was an 11% increase in conversions.

Some things you may want to test include:

Copy
Button color
Background color
Location
Countdown timer

Use First Person

While call to action buttons written in the second person are usually effective, try writing in the first person to have even greater impact. First-person allows you to make the experience more personal for your user. It helps you build trust and create excitement through ownership. For example, if it's already "my trial" or "my eBook," the reader will immediately want to take a look at it.

Use Timing Words

There are a number of words and phrases that you can use in the copy — either above the button or on the button directly⁠ — to encourage people to take action right away. Some examples of this are:

Hurry
Now
Today
Today only
Immediately
Only two days left
While supplies last
Limited supply
Offer ends on [date]

Make It the Most Attention-Grabbing Element

The best CTA button shouldn't have to compete with other elements on the webpage. To be most effective, it should be the most attention-grabbing element on the page. If it is competing with other elements, such as videos or lengthy copy, the reader's attention could be drawn away to those elements.

While taking time to watch a video can be a great thing and indicates that they're engaged with your content, it doesn't generate conversions. Make sure when you do have other elements on the page that they don't stand out more than the CTA button.

Examples of Great Call to Actions

Now that you understand the basic rules for how to create a powerful call to action, let's take a look at some examples so you can see these tips in action. These can also give you ideas for language and design that might work effectively on your own website. Of course, the most important thing to do is regularly test your CTA to explore different ways you might be able to improve your conversions. Here are some of our favorite examples:

Home Page of The Catch and the Hatch Website

Image via The Catch and The Hatch

The background on this website is a video that's continually changing. Yet, throughout the video, the colors remain relatively dark so that the red pops and serves as action color. An action color is any color that stands out on your website that the site owner wants you to take action on.

Yoga Club CTA Button

Image via Yoga Club

There is no such thing as the perfect button color. The most important thing is that it is complementary to your website and stands out. It should also be a color that's appealing for your target market. This button on the Yoga Club website is compelling and grabs the attention of the company's target market. It's also important to mention that the button on the top of their site is actually white, a color rarely used on CTA buttons. Yet, on the bright fuschia background, the white is highly contrasting and cannot be overlooked.

Click Funnels CTA Button

Image via Click Funnels

In addition to compelling copy above the button, there are two parts of this Click Funnels button, specifically, that stand out: the size and the value proposition. This image is only a screenshot of half the page ⁠— the other side of the page held a video⁠ — but take note of the size of the button. It fills the majority of that half of the page. As a percentage, it's substantial. Creating larger buttons like this one can help get more attention.

Moreover, the copy itself is compelling, as it emphasizes that anyone who's interested in trying out Click Funnels can sign up for free for 14 days. After watching the video and reading the great copy, wanting to try it out yourself it the next logical step and will encourage users to do just that.

Fuzzy Yellow Balls CTA Button

Image via Fuzzy Yellow Balls

Though this tennis coaching website uses a lot of bright colors at the bottom of its landing page, each bright block is designed to draw the reader's eye to the most important points. The blue section also has an arrow pointing down, directly to the button — as if you could have missed it in bright red. What's particularly powerful about this button, though, is the copy, which is in first person. It helps establish ownership and connection and actually gets the reader excited about the amazing deal, compelling them to click.

crazyegg CTA Button

Image via crazyegg

This CTA button hits several major marks. First, it establishes the value of its product in the copy and gives users a chance to try it out for themselves with no risk. It also uses simple language written and is written in the first person, instinctively making people want to go ahead and claim what is already theirs, which in this case is a heat map of their website.

leadpages CTA button

Image via Leadpages

This is a great example of a company that's offering two different CTA buttons. There are several things they're doing well, though. First, they're using contrasting colors to make one button pop far more than the other. They're also eliminating the risk by letting their website visitors know that they can try the product for free. The simplicity of the page and all of the surrounding white space helps the button stand out even more, making it readily apparent to website visitors what the company wants them to do.

sumo-convert CTA example

Image via Sumo

This popup from ConversionXL shows a creative approach to making visitors feel the discomfort of saying that they aren't interested. Visitors can either opt in to get the free eBook telling them how to optimize their conversions or click on the text below that says, "No I prefer to suck at optimization."

Netflix CTA Example

Image via Netflix

This final example is really doing everything right. Their value proposition is simple, direct, and in clear and concise language above the text box and button. The background is dark but clearly shows the images of various movies that visitors can watch instantly if they just enter their email. The red button pops in sharp contrast to the dark background. The only other places you'll find red on their home page are at the top left, in the logo, or the top right, where the small sign in button sits. They also reiterate on the button that users can give it a try for free for 30 days, removing all risk.

There are no shortcuts when you're making a powerful call to action button. You need to test to find the best size, shape, color, placement, and copy that will draw the users' attention and interests. Following the steps and examples provided above, however, will help guide you in the right direction and ensure you consider all of the most important factors as you create a CTA button for your site.