Your landing page call-to-action button has the power to make or break your conversion rate.
Designing an effective call-to-action button is important because, without it, your visitors literally can’t convert.
As soon as marketers understand this fact, they start having all sorts of questions about their call-to-action buttons. Questions such as:
- “How should the button be designed?”
- “What should the copy say?”
- “Where should I put it on the page?”
Today’s post is going to answer any CTA button questions that have ever puzzled you, and if we miss some, feel free to ask us in the comments section at the end.
We’re going to divide this post into two main sections. First, covering the primary CTA button, and then the secondary CTA button. We will also examine many types of call to action examples that a variety of businesses use to generate conversions.
But first, the primary button.
Primary call-to-action button 101
Your primary call-to-action button is a combination of design and copy created to complete your primary conversion goal. Your primary conversion goal may vary from campaign to campaign. For example, an ebook landing page’s goal is to generate downloads, whereas your free trial page should aim to get the maximum number of users to sign up.
No matter the type of landing page, primary CTA buttons have the following three goals:
- Direct visitors’ attention toward your conversion goal
- Convince your visitors to take action
- Get you more conversions
A persuasive call-to-action can fulfill your conversion goal no matter what it happens to be. The question then becomes, “what makes a strong call-to-action button?
We reviewed dozens of landing pages and compiled a list of button best practices. The research yields that a primary call to action button contains the following characteristics...
Your CTA button must be clear
There should be absolutely no confusion what you want your visitors to do on your button. The primary button should:
- Have a connection with your conversion goal
- Let visitors know what they’ll get once they click
For example, are you featuring your webinar on a landing page? The CTA button should be relevant to your goal (encouraging webinar registrants), and it should confirm their spot is reserved when the webinar goes live.
The Uberflip webinar landing page has a clear CTA button:
Your CTA button must inspire action
They’re called call to “action” buttons for a reason. One of the main purposes of your buttons is to encourage visitors to take action on your landing page. What better way to inspire them to take action than by using action words that compel them to click and convert?
This is what HubSpot does with the Leadin landing page:
The copy above the button explains the benefits of the service, mentions that the service is completely free, and then follows with the copy “Get Started” urging the visitor to take action.
There are certain words to avoid on your button copy so make sure to stay clear of them. To write actionable button copy, try following this one simple trick: Ask yourself what you want your visitors to do on your landing page. Whatever the answer is, should be your button copy.
For example on an ebook landing page, you want your visitors to download the ebook — so make your button text say that.
The Instapage landing page also has action oriented button copy, “Get Started Now:”
Your button copy should talk about your customers
Personalization is great for conversions because your visitors appreciate when they are the center of attention on your landing page. The same applies to your CTA button. When you craft your button copy keeping the visitor in mind, you’re presenting the action you want your visitors to take from their point of view.
So, instead of your button just saying “download” or “sign up,” why not have it say, “Download My Whitepaper” or “Sign Me Up.” For another example of personalization, scroll up to Uberflip’s page where they have, “Save My Seat.”
Writing your button copy in the second person allows your visitor to take charge of the action they’re taking. When your button says “Download Your ebook” the visitor feels a sense of ownership to the ebook and associates positive feelings with it — making it easier for you to convert him further down the funnel.
Datadog uses second person on its CTA button on the landing page below:
Your CTA button must be instantly visible
A button that’s not instantly visible to visitors has failed to fulfill its goal. It doesn’t matter how compelling your button copy is if your visitors can’t see your button they won’t be able to click it.
To ensure that your buttons are visible, make sure they are:
- Color contrasting
- Surrounded by ample white space
- Have visual cues (arrows, hand pointing, or eye sight) pointing to it
A color contrasting button stands out from the background and other landing page elements, like Upwork’s webinar landing page CTA:
The PostcardMania CTA button is not only contrasting, but it also has a visual cue pointing toward it:
When white space surrounds your CTA button (isolated), you can emphasize it even more because it has more room to breathe.
Here’s what a button that’s surrounded by whitespace looks like:
Designing your CTA button to be clickable is imperative because if the button blends in with the rest of the copy people won’t see it, let alone click it.
The Intuit call-to-action button changes its color slightly when you move your cursor over it. This is known as the “hover color:”
Just make sure you don’t commit the same mistake that Hanapin Marketing makes with their webinar landing page:
Where’s the CTA button? The arrow is pointing to the form’s headline, but what about one for the button?
Don’t make your CTA button so hard to find. You want the conversion, right? Make it stand out so there’s no confusion where the person should click.
Don’t make such mistakes with your CTA button. You’ve spent precious time designing your page, make it worthwhile and put yourself in the best position to earn the conversion.
The fold is arbitrary
Where you place your button shouldn’t be dependent on the page fold, but it should link to your value proposition. Your CTA should only become visible to your visitors once they have sufficient information about your offer. Otherwise, if you place your button prematurely, you risk losing conversions.
On longer sales pages, CTA buttons aren’t placed until the visitor is well acquainted with the offer.
Brandgasm’s CTA button comes after the visitor gets to know the course:
Visitors don't mind scrolling for your CTA button; you just need to make your button visible and contrasting, that's what UserTesting does with their CTA button.
The Instapage landing page, although a bit long, still features the CTA button above the fold because visitors learn the UVP in the headline, “Create Great Landing Pages in Just 3 Minutes:”
This is all the information you need to answer any questions that you may have on your landing page’s primary call to action button.
Now let’s move on to your secondary call to action button and discuss ways you can optimize it to get more conversions.
Secondary call-to-action button 101
A secondary CTA button provides an alternative conversion opportunity or action to visitors. It is not another name for having more than one CTA button on your landing page.
If your landing page has more than one CTA button, like the Instapage landing page featured above — the second and third buttons don’t automatically become secondary CTA buttons. They only become secondary buttons when they lead the visitor to a different conversion action.
For example, this is not a secondary CTA button:
Sure, the copy is different than the centered CTA button, but the conversion goal is the same. When clicked, both buttons take visitors to a two-step opt-in form for the free trial, as demonstrated here:
On the other hand, Squarespace uses “Get Started” as its primary CTA, but once you scroll down, they offer a secondary CTA button to “View Templates:”
The primary CTA takes the visitor to a page where they decide if they want to build a website or an online store, essentially signing them up for the service. The secondary CTA button takes visitors to the template page — for those who aren’t ready to sign up yet — to learn more about what Squarespace has to offer.
Secondary CTAs are effective at promoting intermediate level offers to visitors who aren’t yet convinced to sign up for your product. The secondary CTAs are the gateway to the alternate conversion goals that become helpful in guiding a visitor down the marketing funnel.
With that said, not all landing pages require secondary CTA buttons. It’s recommended you A/B test if the secondary button is valuable and getting you conversions — instead of diverting your visitors’ attention from the primary conversion goal.
Furthermore, be careful not to overshadow your primary CTA button with your secondary button because that’s like rivaling your primary conversion goal with your less desired conversion goal. If you include a secondary CTA button, it should always complement the primary button and not compete with it.
The best type of landing page for a secondary CTA button is a sign-up page for your service. Maybe offer any hesitant visitors to download an educational resource like an ebook or a whitepaper and follow up with them further down the funnel. You can also showcase other reasons why your service is right for them by explaining other product features.
Want to do right by your CTA button? Take everything you’ve read here and put it into practice and don’t forget to A/B test which buttons get the most action from your visitors.
P.S: Instapage now offers you the opportunity to create better buttons for your landing pages. Not only can you modify the size of your button font, but you can adjust your button’s corner radius and choose any button font you wish. Excited to create your landing page with primary and secondary call-to-action buttons? Create your first landing page here.