4 Tips for Designing Landing Page CTA Buttons That Convert

Your CTA buttons are the culmination of your marketing efforts, the last step in the long process of turning a target buyer into a buying customer. 

Provided you did everything right, you will have the right audience on the right page of your website, with all the information they need, (almost) 100% convinced that your product/service is the right one for them. 

The thing is that the “almost” in the brackets makes a huge difference between a company that makes money and one that doesn’t. People are rarely 100% on anything, let alone choosing a product or service online out of at least a few options (in most cases). 

This is why every last bit counts on that final step before you get another customer. Funnily enough, one factor that often gets overlooked is the CTA button, the actual button that the website visitor has to click to become a paying customer. 

Don’t make the mistake of underestimating the importance of CTA buttons. In this article, you’ll find some tips to point you in the right direction when it comes to designing landing page CTA buttons that convert. Keep in mind, you won’t find advice on CTA copy in this article, as that is a whole other subject that requires a post of its own.

1. Test, Experiment, Combine

There are no magic CTA button guidelines that will work for every website or page out there. CTA buttons are always context-dependent, and something that works for one website might not work for another. 

This is why it is absolutely essential that you test your hunches and ideas. In fact, CTA buttons are the perfect place to start doing A/B testing if you’ve never done it before. You can easily and quickly find out whether your tweaks to CTA buttons have an effect on conversion rates and what kind of effects you are seeing. 

This way, you will soon find out whether CTA button best practices work for you and how to best combine them to create the buttons that will convert on your website.

2. Location, Location, Location

It goes without saying that the position of the CTA button plays a major role in how well it converts. 

The first major rule of positioning your CTA buttons is that you will want to feature the most prominent button (in case you have more than one on your page) above the fold. The section above the fold gets far more attention than other parts of a page – according to Nielsen Norman, almost 60% of viewing time.

You should also give it room to breathe, meaning that there should be clear space between the CTA button and other content on the page. Take a look at inFlow’s barcode software features page for a neat example. Their CTA button is highly visible, and it is not cramped by other elements. The overall clean design of their page makes it even more prominent.

When you need to feature more than one CTA button on your page, make sure that their location makes sense. They should always follow a certain logic in respect to how a visitor will consume your page. For example, if you are elaborating on the various features of your accounting software, you may want to add a CTA button inviting the visitors to schedule a demo. “Just” put yourself in your visitors’ shoes. 

We should also mention the so-called scrolling (or floating) CTA buttons, which stay visible as the users scroll down and up a page. Runners Athletics uses this kind of CTA button to ensure their visitors can click on it at any time. In combination with a copy that plays on the urgency, this makes for an assertive and effective sales approach. 

You have to be very careful with scrolling CTA buttons, however. They can be disruptive and annoying, especially if they cover up content on your page as you scroll down. The key takeaway is that you don’t just slap them on haphazardly. Think long and hard about how they will behave on your web page.

3. Which Color and Size?

There are hundreds, if not thousands, of articles explaining which colors to use and which to avoid when designing your CTA buttons.

For instance, you will find that at least 50,000 of them tell you that you literally must use green or orange for your CTA buttons. No matter what. Green or orange. Or, never use red for your buttons!

In reality, it doesn’t work that way. Remember the importance of context from above? Sometimes green or orange buttons will really be the best choice, but oftentimes, they won’t. 

For example, take a look at Proofhub’s homepage. Considering that even their logo is green, you’d expect them to go with a green CTA button, right? Well, they realized that it wouldn’t be as visible due to the green-highlighted features in their copy. So, they went with blue. 

It has to make sense. 

Kissmetric illustrates the pointlessness of prescribing colors in their paper on the use of color in designing CTA buttons. They feature three different case studies where brands went red-to-green, green-to-yellow, and even green-to-red (“never  use red”), all equally successful. 

When it comes to the size of CTA buttons, you will want to strike a balance between buttons that are visible and easy to click but that don’t feel overly aggressive. Featuring buttons that are too large makes visitors feel they are being shouted at and pressured into taking action. 

There are, however, situations in which CTA buttons that would usually be considered too large can be tolerated. A good example of this is Bay Alarm Medical’s homepage. That is definitely one enormous button and, in most cases, it would be too aggressive. However, their customers are the elderly, so larger web page elements are actually a good idea. 

Once again, it’s all about context.

4. Maybe Go Animated?

The main purpose of CTA buttons is to be visible. One way in which you can also make them visible (in addition to color, size, and position) is to use animation to make them pop out even more. 

These can range from simple animated CTA buttons that simply change color or zoom in when you hover over them, or they can be more elaborate, like buttons with an animated gradient or buttons that bounce when you click on them. 

While simpler animations will work for almost any website out there (and you should definitely use them), the more elaborate ones may feel out of place on certain websites.

Context. Context. Context.

You can find some great examples here and here.

Closing Word

Playing with CTA buttons can be interesting and exciting, and a tweak here or there can make a big difference for your conversion rates. That being said, many websites have much bigger problems than CTA buttons, and they should take a look at those before they start spending days on the buttons. You can always use this guide on increasing your website revenue if you need a place to begin.Once you sort out the essentials, by all means, spend as much time as you wish testing different CTA buttons.