In this post, we will be looking at a very important aspect of landing page design: call-to-action buttons. Everybody has them, but not everyone uses them to their fullest potential.<\/p>\n
Let\u2019s dive right in.<\/p>\n
What Is a CTA Button?<\/h2>\n
Just in case you are not completely comfortable with the term, let\u2019s briefly clarify what CTAs are.<\/p>\n
A call-to-action is a bit of text (that can also be combined with an image or take on the shape of an actual button) that tells your visitor what they should be doing next. This can be signing up for your email list, making a purchase, checking out some of your content \u2013 any action that you want them to take and that is of a certain value to you.<\/p>\n
What Makes a Good CTA?<\/h2>\n
Unfortunately, there is no clear answer to this one.<\/p>\n A CTA that works<\/a> well for one brand won\u2019t do anything for another, and vice-versa.<\/p>\n Your main aim is to:<\/p>\n The key to designing CTAs that convert is knowing your target audience and the pain points they are trying to solve.<\/p>\n The better you understand them, the more effective your CTAs can be.<\/p>\n Now let\u2019s take a look at some more hands-on tips and examples.<\/p>\n There will be pages where a single CTA works well \u2013 for example, your blog posts can feature a single CTA button at the bottom. However, your sales-focused landing pages would benefit most from featuring more of them.<\/p>\n How much is enough will depend on the length of your page. Essentially, try to aim for having a CTA within reach no matter where a visitor is located on the page.<\/p>\n You want to be careful not to go overboard. Too many CTAs will often come off as pushy and too sales-y, so you want a nice middle ground. Working out what that middle ground actually is might take some time, but the effort will be worth it.<\/p>\n Another point to bear in mind is keeping your CTAs cohesive. You don\u2019t want each different page to use completely different CTA copy and design. It will only cause confusion.<\/p>\n You can craft different CTAs for different purposes and use one kind of design for email signups, another for conversions, a third one for your informative CTAs, and so on.<\/p>\n This is where another issue arises. Which CTA should you place at the top, and how should you determine which ones to scatter throughout the rest of the page?<\/p>\n When we consider what a CTA is \u2013 a way for you to inspire action \u2013 the best way to make your choice is to consider two things:<\/p>\n For instance, if you have a page that is specifically designed to be a lead magnet, your most valuable CTA will be the one that inspires people to sign up for your email list. On the other hand, a sales page (or your homepage) might benefit from a more sales-specific CTA.<\/p>\n However, the latter doesn\u2019t mean that you need to offer an outright sale. Shakr<\/a> offers a demo signup in their hero section \u2013 that\u2019s definitely an action that is meant to lead to a conversion, but not an outright purchasing or committing CTA.<\/p>\n As you want your CTAs to be noticeable, the easiest way to achieve this is to use vibrant, contrasting, and eye-catching colors. Depending on your page\u2019s design, a color opposite to it on the color wheel can work well.<\/p>\n You don\u2019t want the effect to be garish and overwhelming, though. You\u2019re aiming for something effective but not over the top.<\/p>\n Here\u2019s an example from Medical Alert Buyers Guide<\/a>, whose CTAs are orange.<\/p>\n Definitely a very colorful option, but it works well on the page, especially as it\u2019s the most visually attractive part. It\u2019s not too overpowering, though, as the CTAs are not too big.<\/p>\n 4. Blend It In<\/p>\n If you don\u2019t like the idea of a very colorful CTA, you can do the exact opposite and create CTAs that blend in with the rest of the page. This will certainly be the better option if you\u2019re looking for visual cohesion and aiming for a neutral, serene effect.<\/p>\n Don\u2019t worry about visitors not being able to spot your CTA \u2013 they will still be noticeable, just not as wildly so.<\/p>\n Somnifix<\/a> has achieved this effect very nicely.<\/p>\n Considering that their product promotes healthier sleep, it\u2019s no wonder they have chosen the more muted route, which is much more in line with their branding. Sticking an orange CTA on their page would have achieved an adverse effect.<\/p>\n Branding your CTAs is a great way to improve brand identity<\/a>. You won\u2019t be able to do this with every single CTA, but there are instances where it can be achieved without making it sound unnatural. As you\u2019re trying to deepen the connection a visitor has with your brand, insisting on the community aspect of the service or product, with the aid of your CTA, is the way to go.<\/p>\n You can go for Join BRAND NAME today, or Try PRODUCT NAME \u2013 simple but effective, and it underlines brand identity.<\/p>\n Prezi<\/a> has branded their different solutions: Prezi Present, Prezi Video, and Prezi Design. Nothing over the top, but a simple yet effective way to reinforce a connection with the brand.<\/p>\n Sometimes, you want the CTA to convey your biggest selling point as concisely as possible. That\u2019s especially the case when this selling point is something super-effective, such as a free trial, a money-back guarantee, free delivery, and so on.<\/p>\n Adding this CTA to the hero section of your page can be incredibly effective because you\u2019ll be grabbing the visitor\u2019s attention instantly with something that points to a quick and easy conversion.\u00a0<\/p>\n A brand that does this well is, of course, Netflix<\/a>, with their 30-day free trial highlighted right at the top of the page. Since anyone landing on the homepage will likely already know what Netflix is, offering this instant conversion path saves plenty of time and scrolling.<\/p>\n Homepage CTAs can be tricky, and brands often stick to the simplest solution \u2013 offering an email signup or redirecting traffic to their sales pages. That\u2019s understandable, especially if you sell more than one product, offer more than one service, and target more than one audience segment.<\/p>\n While you can certainly circumvent the confusion by designing different landing pages for different audiences, you still need a homepage. And it needs to cater to a large part of your visitor base.<\/p>\n BarkBox<\/a>, for example, has come up with a clever solution \u2013 they offer the option of signing up for their service or sending a gift to someone else. This solution works with their two largest audience segments, and it offers an instant way to convert from the homepage.<\/p>\n Another great way to approach CTAs is to consider them as a way to provide extra information.<\/p>\n This approach will be useful for situations when a lead is not quite ready to commit to a conversion just yet. Maybe they want to learn a bit more and would like to be taken to a page that details more of your solution\u2019s features, discusses pricing in-depth, or provides testimonials from other clients.<\/p>\n This kind of CTA can work especially well if you provide a service or sell a product your customers are not 100% familiar with. They will appreciate you trying to provide information, as opposed to forcing a sale on them.<\/p>\n WP Engine<\/a> provides these kinds of CTAs within their hero section. Their entire homepage features zero sales-focused CTAs and focuses purely on bringing their solution closer to their audience.<\/p>\n Considering how complex hosting can be for the uninitiated, this kind of solution will work wonders.<\/p>\n Sometimes the best CTA is one that does not demand too much of anything. No attractive colors, no creative copy, no bells and whistles, just a simple prompt to perform a certain action.<\/p>\n This is especially true when it\u2019s quite clear to a visitor what they should be doing, and they just need to be provided with a way to do it, without any additional coercion.<\/p>\n Runner\u2019s Athletics<\/a> has these kinds of CTAs that are essentially nothing more than Add to Cart buttons. Yet, that\u2019s all they need. They have showcased their products, so all that\u2019s left for a visitor to do now is make a purchase \u2013 and that action can be inspired with a very straightforward CTA.<\/p>\n A CTA that converts is not just about appearances. It\u2019s often about the way you choose to phrase your copy.<\/p>\n While the simplest and fastest solution would certainly be to go for one of the well-known versions of the \u201csign up\u201d and \u201cclick here\u201d variety, a little bit of effort on your part can make all the difference.<\/p>\n This is where you should truly be considering both your target audience and your brand identity. What is it you can offer customers, what makes you unique, what is your story?<\/p>\n Suntrust<\/a> features a great CTA in their hero. As the company tries to tackle the unique challenge of helping you grasp your finances better, the hero CTA doesn\u2019t take you directly to a sales page.<\/p>\n The copy used is appropriate and definitely not your run-of-the-mill CTA solution.<\/p>\n Focusing on the copy and the design of the button itself shouldn\u2019t overshadow your considerations about the background you want to use with the CTA.<\/p>\n Some might work well with a plain white background, but others will need hero backgrounds or images that add some visual value to your page without distracting too much from the CTA itself.<\/p>\n Take some time to consider the background when designing your CTA. You might find you need to make it white instead of black, or that you need to make it slightly larger than you originally thought.<\/p>\n Sleep Junkie<\/a> has done a good job of aligning their CTAs with the background they are featured on, adapting their color and size accordingly. For example, the homepage features a purple colored button that stands out and matches the other design elements on the page.<\/p>\n One of the basic rules of sales is \u201csell solutions, not features.\u201d<\/p>\n You should always be focusing your sales copy on your customers and what they are getting, as opposed to yourself and the amount of work you\u2019ve poured into a product\/service or what that product\/service can do.<\/p>\n You want to make it clear what converting will provide and how it can benefit your visitor. Show them what they can expect to receive and how that will slot into their life. Let them know how it will make their life easier, happier, more organized, or whatever other benefits your solution can offer.<\/p>\n Achieving all of this with a CTA can be quite a challenge, but it can be done. Take a look at Body Alchemy\u2019s<\/a> CTA. It might be a bit long, but it is definitely unique, and it cuts right to the chase, clearly stating what the visitor will gain by clicking on that button.<\/p>\n Today\u2019s online consumers are used to, and addicted to, instant gratification.<\/p>\n When we consider how much instant access the internet actually provides, it truly is no wonder we have become a species that has the attention span of a goldfish<\/a>.<\/p>\n What this means for your CTAs is simple: you can boost your conversion rates significantly by pointing out how the action you want someone to take can lead to instant gratification.<\/p>\n For instance, if signing up for your email list provides instant access to an ebook, make sure you emphasize this in the CTA. If making a purchase can help someone instantly access or unlock a certain benefit, point that out.<\/p>\n Making people feel they\u2019re getting something right away is a great way to compose your CTAs, especially if there is a bit of FOMO involved as well.<\/p>\n Shopify knows this well, so their Academy CTAs<\/a> play with instant gratification by highlighting all the features you are gaining access to just by signing up.<\/p>\n![\"square-cta\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/square-cta.png\")
<\/a><\/p>\n\n
1. Use More Than One CTA<\/h2>\n
2. Place Your Most Valuable CTA First<\/h2>\n
\n
![\"shakr-cta\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/shakr-cta.png\")
<\/a><\/p>\n3. Choose a Stand-Out Color<\/h2>\n
![\"medicalalertbuyersguide-cta\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/medicalalertbuyersguide-cta.png\")
<\/a><\/p>\n![\"somnifix-cta\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/somnifix-cta.png\")
<\/a><\/p>\n5. Keep It Branded<\/h2>\n
6. Focus on Your Main Assets<\/h2>\n
![\"netflix](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/netflix-cta.png\")
<\/a><\/p>\n7. Don\u2019t Limit Your Choices<\/h2>\n
8. Offer More Information<\/h2>\n
![\"wpengine-cta\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/wpengine-cta.png\")
<\/a><\/p>\n9. Stick to Simplicity<\/h2>\n
10. Use Compelling CTA Copy<\/h2>\n
![\"\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/Suntrust-cta.png\")
<\/a><\/p>\n11. Don\u2019t Forget about the Background<\/h2>\n
![\"SleepJunkie-cta\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/SleepJunkie-cta.png\")
<\/a><\/p>\n12. Focus on the Solution and the Benefit<\/h2>\n
13. Focus on Instant Gratification<\/h2>\n
![\"\"](\"https:\/\/www.capsulink.com\/blog\/wp-content\/uploads\/2020\/12\/shopifycompass-cta.png\")
<\/a><\/p>\n