CTA Button - Instapage Guide

Landing Page Design Best Practices

Chapter 9

CTA Button

A landing page call-to-action button is where the conversion takes place.

In fact, it wouldn’t be wrong to say that the fate of every other landing page element hinges on the call-to-action button. Design it properly and get a click; hide it amongst the rest of your landing page and you risk abandonment.

To design your CTA properly, take the following factors into consideration:

Position

The CTA button’s position has an impact on your conversion rates. Where you place the button has nothing to do with the page fold and has everything to do with your offer.

The button should always come after you’ve introduced your offer to visitors and have presented your unique selling proposition. If you place the button too soon, you may turn your visitors off because they haven’t been convinced by your other page elements (such as headline and body copy).

As a general rule of thumb, the shorter the page the sooner you can place the CTA button. This placement rule also applies to the complexity and monetary value of your offer. If what you’re offering your visitors is a complex software that requires them to pay a fee, then the CTA button should only come after you’ve fully explained the offer to them. Sales pages often fall into this category.

If you have a free ebook available, then you can place the CTA button near the main headline, like UserVoice does with this landing page:

UserVoice Landing Page Example

The placement changes when the visitor is required to pay for the offer.

The “Buy Now” CTA button on Sujan Patel and Rob Wormley’s ebook landing page draws attention to itself because it’s presented after the offer is described and is isolated from everything else on the page:

Ebook Landing Page Example

Both examples above demonstrate CTA buttons that are above the page fold. The difference lies with the amount of copy that precedes each button. For the free offer, UserVoice believes only a headline and sub-headline is enough to persuade visitors to consider clicking the CTA button, whereas 100 Days of Growth requires a full paragraph of copy explaining why buying the ebook is a good idea.

Size

Common sense dictates that the larger something is, the more noticeable it will be. So, it makes sense to design the call-to-action button to be relatively large.

Fitt’s law dictates that the “larger and closer a target, the faster and easier it is to select that target.” For CTAs, this essentially means the bigger the button is, the easier it is to point to it and click it.

Remember the size of the button is relative and not an absolute. You want your CTA to be easily noticed but not an eyesore. Don’t include an enormous button because this will mess up the aesthetics of the page and most likely discourage conversions.

The blue “See product demo” button on the Infusionsoft page is a little smaller than the surrounding elements and doesn’t draw attention to itself.

Infusionsoft Landing Page Example

Make sure the button is bigger than its surrounding elements so that it stands out. Do what Racheal Cook does on her landing page:

Racheal Cook Landing Page Example

Now that’s a perfectly-sized CTA button for this particular landing page.

The “perfect CTA button size” simply doesn’t exist because all button sizes should be determined keeping in mind the overall landing page design.

Color

When deciding the color scheme of your landing page make sure to design the CTA button in a contrasting color. This will help the button “pop” off the page and be found easily by visitors.

The Elite Marketing Pro landing page has a good contrasting CTA button:

Elite Marketing Pro Landing Page Example

Multiple Buttons

Although not recommended, it’s not uncommon to have more than one call to action button on landing pages. A secondary CTA button doesn’t refer to the number of CTA buttons. Rather, it provides visitors with an alternative conversion action to fulfill.

For longer sales pages it’s possible to have 5-6 buttons and not have a single secondary button.

Secondary buttons should be used as a last resort because they break the basic singularity rule of landing pages. Don’t make the primary CTA button and conversion goal fight for your visitors’ attention by including a separate offer on your page.

Copy

Similar to the overall copy of a targeted page, the CTA button copy needs to be customer-centric. This is because CTA buttons are meant to inspire action and the copy that should be action-oriented.

For example, the “Start Your Free Trial” button copy on Desk.com’s landing page inspires action:

Desk.com Landing Page Example

Customer-centric button copy is relevant to the landing page offer, which makes the click experience even more optimized for visitors.

The Instapage landing page button copy keeps the visitor in mind and goes one step further having it personalized with “I:”

Instapage Button Copy Example

Including the words “you,”,’I” “your,” “me,” and “mine” make your visitors see your offer through their eyes — which helps persuades them to click the button.

This is what CoSchedule does with their free trial page:

CoSchedule Free Trial Page Example

CTA buttons can make or break landing pages because if you’ve optimized everything else on the page — and the CTA isn’t designed to convert — then you’re missing out on valuable leads (and sales). Make sure you design your buttons with position, size, color, and copy if you want to maximize conversions.

Choose a Chapter

Sign Up for a 14-day Free Trial

Maximize your ad spend while significantly lowering your cost of customer acquisition.