This call to action buttons best practise guide helps to identify what a call to action button is, where is should be placed, how it works and why they should be used. Call-to-action buttons are fundamental to converting as many anonymous visitors as possible into leads. The CTA promotes your offer and is the first step of the leads conversion process. Call-to-action buttons can promote anything, and can be placed in any of your digital content including web pages, blog articles, emails, PDF files, and thank you pages.
Almost every web page, blog post, email, or PDF document you create should contain at least one call-to-action button that entices the reader to visit a landing page and register. Take every possible opportunity to add call-to-action buttons that promote your digital assets or other offers. A web page, blog post, email, or PDF document without a call-to-action button is a lost opportunity. Without the contact information, you cannot do any proactive marketing to your visitors.
What makes a good call to action button?
The difference between a good call-to-action button and a poor one is what click-through rate it achieves. A well-designed call-to-action button can trigger many visitors to click on it, while an ineffective one doesn’t. If visitors don’t click on the CTA, they will never see the landing page with the registration form. To collect as many leads as possible, you need to have a great call-to-action button with a high click-through rate.
It is easy to add a call-to-action button somewhere as an after-thought at the end, but the better approach is to reverse the process. Before your write a new blog post or mailshot, consider what the next step is in the reader’s customer journey. Then you can optimize the copy of the blog article or email so it leads up to the CTA button. This makes the reader want more information on the subject and increases the likelihood he or she will engage further.
Where should your call to action button point to?
Usually, the destination page of a call-to-action button is a dedicated landing page, with access to the digital asset guarded by a registration form. Make sure clicking on the CTA button opens the landing page in a new web browser window, rather than moving the visitor from the original page to the landing page in the same browser window. Why? There are two reasons.
First, if the visitor doesn’t like the landing page or its offer, he or she will close the browser window to get rid of it. Unless the call-to-action button opens the landing page in a new window, you have also lost the visitor from your website if this happens. By letting call-to-action buttons open landing pages in new browser windows, you keep them on your website should they close the landing page window. At least you get a second chance to keep their interest.
Second, landing pages should be focused on the one and only goal of getting the visitor to submit the registration form. Hence, landing pages should have no navigation menus or other distracting content. This is hard to achieve if the landing page lives in the regular website window, as the website template likely adds menus and other distracting elements to all pages.
Call to action button text
The title and other text on the call-to-action button should be short, with a clear message, and written in an actionable language. In practice, this means the title should start with a verb, like “Download…”, “Request”, “Read…”, “Watch…”, or “Learn…” It should also explain what the offer is and include relevant keywords. Try to be as clear and concise as possible.
The call-to-action button must stand out graphically, and should be relatively large without dominating the design. You want it in contrast (signal) colors, but you also want the coloring to work well with the visual scheme of your website.
A call-to-action button is a clickable hyperlink and must, therefore, look like a clickable object. Often this means it graphically looks like a button, but it can also look more like a banner advertisement. A call-to-action button that looks like a well-designed banner-ad will likely get a higher click-through rate than one that just looks like a text button.
Using CSS to create buttons
A text button can be implemented using HTML with CSS styling, or using a bitmap image. A graphical banner ad usually combines text and graphics inside the bitmap, as well as a region within the banner ad that looks like a clickable button. This is technically not the case, since the full image is the clickable area, not just the part of it that looks like a button. You can make it look more like a clickable object by adding rounded corners, 3D borders, and shading.
A recent trick to increase click-through rates is to add an arrow pointing to the call-to-action button. The arrow is annotated with a label along the lines of “Click here” or “Get the eBook”. This can help draw more clicks.
How to create CTA buttons
To create images implementing your call-to-action buttons, you can either use a bitmap editor like Adobe Photoshop (commercial) or GIMP (free). Perhaps easier, just use Microsoft PowerPoint or Apple Keynote and save the graphics as a bitmap image. There are also many button builder services on the Internet you can find with a search for “button generator”.
Where should the call to action button be located?
Now that we know how to design call to action buttons, where should they be located for highest click-through rate? First, a call-to-action button should only be placed on a web page or in an email with content relevant to the offer it promotes. A call-to-action button advertising a motor yacht buyer’s guide may not perform well on a web page on windsurfing, for example. Create another digital asset relevant to the web page and promote that instead of adding out-of-place offers.
Second, the call to action button should be visible above the fold (i.e. without any need to scroll down to see it). Additional call-to-action buttons can be added below the fold, but make sure at least one of them is visible without scrolling. The exception is blog articles, where it makes the most sense to have the call-to-action button at the end of the article. The thinking here is that the blog article text leads up to the CTA offer.
The top left part of a web browser window is the area Internet users see first, so you may want to put your call-to-action button in that region. But this is not always possible, as the call-to-action button must also be located close to the content discussing the topic related to the offer. Make sure there is some white space around the CTA to make it look like an independent object, but don’t put it too far away from the text that relates to it either, as it may become visually disconnected.