CTA design tips and guidelines

Call to Action elements have a tremendous impact on the company conversions and are correctly considered as the most important element of your interface.


Lia Crupi

UX / UI designer

Just like the traditional face-to-face selling, you are trying to sell a service, a good or a content to users through your website, but with a big disadvantage: between you and your customers there are entire continents, multiple time zones and the limitations of coding. Call to Actions (CTA) – those buttons that tell you to buy, click, download or sign up – are your closing arguments, the pivotal step that turns visitors into customers and brings conversions. For this reason CTAs demand their own design rules, and the success of your CTA is the success of your entire brand.

What is the CTA button?

A Call to Action button is an interactive interface element used to induce people to take certain actions - such as purchase, contact, subscribe etc -  that are important for the conversion for a particular page, for example.

Traditionally, effective CTA buttons are easy to notice - bold buttons containing microcopy with a particular call-to-action - intentionally created that way so that people couldn’t resist clicking: “Learn more”, “Buy it now”, “Start for free”.

Why are CTAs  important?

Getting someone’s attention is never easy, especially these days where users are bombarded with all kinds of information - resulting in the overall attention span to decrease to around 8.25 seconds. This is also the reason why most of the top startups have transitioned to a minimalistic user interface style.

By only focusing on certain key elements, you could increase their significance and efficiency resulting in better conversion rates - read our post blog about the Pareto Principle, in order to find out how to identify those key elements. 

One of those key elements is the CTA button which is essential for most websites and products. They are designed to allow the user to take specific actions; creating an account, adding to cart, purchasing a product, and many more. When designed well, these buttons not only allow the user to effectively navigate through your product but are critical in conversion flows.

What does a CTA button look like?


Any CTA´s priority is to make users click, so their design should coincide with the objective and that's why it’s important to appear clickable.

What can make a button look clickable? First of all, it is a visual presentation. A button may seem more clickable when designers add some 3D effect to it, such as a slight gradient or a small shadow. If a button with a 3D effect doesn’t suit the chosen style, clickability in a flat design can be emphasized via rounded edges, for example.


The bigger an element is, the more noticeable it becomes. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen. With some limits: a Call to Action button is usually big enough to be quickly found but not too big so that the visual composition and hierarchy of the layout wouldn’t be spoiled. Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.


Color choice depends on various aspects which make the process more complicated. Designers need to consider some aspects such as brand colour, background colour, target groups, etc. 

There is one condition which is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components while matching web accessibility standards.

Other recommendations to keep in mind

Write compelling copy and be concise

Less is more, but concise doesn’t only mean short. CTA buttons are meant to initiate an action so words are crucial to catch user's attention, persuade her and lead her to the right action.

According to experts around the world, the most common Call to Action copy phrases are compressed into 6 basic categories (source: 6 Call To Action Copies That Convert):

  1. Sign up

  2. Subscribe

  3. Try for free

  4. Get started

  5. Learn more

  6. Download Free/Now

Use contrasting colors and give them a visual hierarchy

Most of the time, CTA buttons come in a pair; “log in & sign up”, “confirm & cancel”, etc. That’s why it’s important to clarify your primary CTA and create a visual hierarchy to make it the focus. 

Always try to make the primary CTA button more prominent by using a contrasting color to capture user attention, while the secondary action could be represented using a ghost button or just a simple text link.

Color is the number one factor that influences the Isolation Effect when it comes to buttons: the element that most prominently differentiates from multiple similar objects, it is as well the most remembered.

Use white space

White space, also known as negative space, is the area between elements in design composition.

White space is not just a background - and definitely not white only - of a visual composition, it is also a powerful tool for emphasizing UI elements: with the right amount of white space around a button becomes more noticeable.

Moreover, white space sets the connection between UI elements. The less white space between the components, the more connected they are.

Keep user flow in mind

As we mentioned, a CTA is supposed to grab attention and lead the user to the right actions such as buy or download. But a CTA alone is not enough, no matter how convincing it is.  The direct path that a user would follow while consuming the page’s content is highly important as well. By arranging your copy and buttons in a way that encourages a natural reading flow you can direct your visitors to your CTA.

One last recommendation: test, test, and test

If you want to make sure something works well, you need to test it. 

One of the most efficient CTA testing methods is A/B testing. It compares two versions of a digital product in order to find out which one performs better: in case of CTA buttons, designers can change their placement, size, color or microcopy. 

The effectiveness can be measured by different criteria such as clicks, number of subscriptions, or sale-leads, and sometimes combining a few metrics. For example, you can test a color of a button measuring the number of clicks and subscriptions.

Other tools can help checking for example that you have chosen accessible colours pairing - very useful for that is Stark plugin.


In general, Call to Action elements have a tremendous impact on the company conversions and are correctly considered as the most important element of your interface. You can take a closer look at the most successful digital companies and how they structure the content around their Call to Action elements, or better, you can ask us to make your Call to Action button stand out and grab the necessary attention it demands.