Jasmin Edgar

Digital Designer

May 7, 2021

CTA Buttons: 6 Practices You Should Consider

CTAs or rather known as Call-to-Action buttons is a great element when it comes to digital marketing. Not only does it encourage clicks, but it gives businesses an opportunity to bump up their conversion rates. 

As we know by now, the CTA or rather known as a Call-to-Action is a button that encourages and guides people to perform an action a brand desire. However, does the design of a CTA button affect one’s action?

Before we dive in on this topic, there’s one thing to keep in mind. Generally, this button consists of two design elements in general: the design and the copy. It’s obvious that the copy encourages people to know more, whereas the design guides the users where to click.

Here’s an exemplary situation – say you’re a clothing brand and you’re running a 20% off and on Facebook. The copy of which says ‘20% off’ is the element that encourages people to want to know more. Meanwhile, the CTA button is the guide to where audiences can receive the 20% off! 

Great! Ready to know more? Here are 6 practices you should consider when it comes to CTA buttons.

No 1:

Choose Highly Contrasting Colours

When designing your CTA button, you should always make sure that it stands out on the banner you’re creating. Remember, this is your key element because you want people to be clicking through your ad so that there’s an opportunity for sales conversion! 

The best practice would be to use a contrasting colour for your CTA so that it stands out giving the audience a guide to know where to click! Even better if the colour you use isn’t utilised anywhere else in the design. 

No 2:

Use Appropriate Sizing

Yes, we get it – it’s easy to think that the bigger the size, the more noticeable the CTA button. While the thought of it is not wrong, let’s choose to make it look aesthetically pleasing, should we? To do so, you must follow the principles of the visual hierarchy. The main one being composition. Your CTA button should be reasonably proportionate to the entire layout. For instance, the size of the CTA button should be large enough for people to read what’s in it but it shouldn’t take over half the design nor should it be larger than the rest of your visual copy as then, the overall design would be too overwhelming. 

This then leads to distraction as viewers are unsure of what elements to focus, causing your ad to result in a low click-through or conversion rate.

No 3:

Leave Enough White Space

The infamous ‘white space’, or also known as ‘negative space’ or ‘dead space’, is the area that sits between the elements of a visual composition. Serving more than just a background, it also acts as an important tool in emphasising particular elements in a design such as your CTA button — allowing it to stand out from the other design elements. A great tip to keep in mind is that you should always avoid cramping your design elements too close to one another as this reduces readability. This could harm the marketing goals you’re trying to achieve. Hence, remember to provide appropriate white space between where it’s needed to improve focus and to also create a better comprehension of the offer.  

When you apply an appropriate amount of white spaces within a composition -it can also help build or separate a connection between the different design elements. Let’s take a website design as an example, when you apply the same amount of dead space in between the header, sub-header and the CTA – it sets as a guide – allowing the viewers to understand that all the design elements they’re looking at forms a particular section. Meanwhile, on the other hand, if you place a great amount of white space, it means that the viewers have entered another section. 

No 4:

Simple and Clear Copy

Your copy in the CTA button plays a crucial role. The idea here is to get people to click through your ad in the least amount of time possible. So how do you create an effective CTA? First, you should determine the goal you want to achieve because once you know what to do, you can think about how best you can do it. Here are a few examples to define your goal:

  • Are you looking to encourage sales?
  • Move viewers to another content piece?
  • Increase subscriptions?

Often times, the best CTA copies are brief strong verbs such as:

  • Book Now
  • Join Community
  • Buy Now
  • Learn More
  • Start Adventure

A good CTA copy is straightforward, it should tell the viewer exactly ‘what’s in it’ for them and if possible, it should be no longer than three words. 

No 5:

CTA Placement

Your CTA placement plays a crucial role, especially if you’re looking to bump up your clicks and conversion rates. So, how do you determine where are the right places to place your CTAs? One, by understanding the user’s mental model and two, the user’s journey.

Mental Model

The mental model is an overarching term for any sort of framework, concept, or worldview that you carry around in your mind. For instance, when people are looking to go back to a website’s homepage, they’d naturally click on the brand’s logo. Similarly, when someone is looking to sign-up for an account, they’d normally look at the top right of the website. In short, mental models are formed through the frequent use of a system and the understanding of how it works. By recognising this, you’ll be able to place your CTA buttons at places where it’s recognisable for your viewers. 

Reading Flow

Reading flow is another way that can help you determine where you should place your CTA. You want to guide your users to take immediate action once they’ve finished reading a statement. This statement could be on your website banner, the visual copy on your ad, or a section in an email. Your CTA should be placed after a statement that indicates what the readers will get. For instance, after reading a website banner or an ad, there’s a CTA button that will lead viewers to ‘learn more’, ‘buy now’, etc. By doing so, you’re able to generate more leads or bump up your conversion rates!

No 6:

Test and Re-test

So now you’ve got the design, copy, and even the placement right. How do you know for sure that your CTA button is truly effective? You run an A/B testing. What’s an A/B testing you ask? A/B testing is the process of comparing two versions of something similar to measure the differences in performance. However, keep in mind that you’re only allowed to test a variant at a time. For instance, you’re not sure if your CTA design is eye-catching enough, you create one in the colour blue and the other in yellow. See? Only one variant of which is colour. You can do this for the copy or CTA placement as well but only one at a time. 

Once you know what to test, you send one colour to the first group and the other version to another group. Only by doing this can you see how each variation performs. The end result will let you know which marketing asset works better. With this, you can make better design decisions when it comes to ad copies, web design, and more as it is not limited to just CTA. 

A well-designed CTA can be a great turnaround tool for your campaigns – especially when they appear at marketing contents that are relevant like email banners, Instagram story ads, on your website and more. So be sure to keep these practices in mind and you’ll be all set. If you’ve found this article useful, share it with a fellow marketer who needs this or bookmark this article so you can access it whenever you need it!

Also, here at Admiral Digital, we provide audit services for ad accounts, and websites so, if you are interested, we would be delighted for a quick chat. Drop us a note at [email protected]. Cheers!

Jasmin Edgar

Digital Designer

Share this post!
Share on facebook
Share on twitter
Share on linkedin

Other posts that you might interested in

Basic and Impactful Data in Google Analytics

7 Steps for Driving Mobile App Installs on Facebook

9 Common Reasons Why Your Ads Aren’t Showing in Google

Kuala Lumpur



Hong Kong

Ready to receive marketing and technology tips, offers and more in your inbox? Sign up to our newsletter.

  • This field is for validation purposes and should be left unchanged.