Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Best Practices to create desirable Call-To-Action Buttons

Friday, April 26th, 2013 by Servage

In website design, the designer has to mingle two goals in her design. The first one is the goal for the website itself, for which it has been made, like conversion in case of e-commerce or read more, etc. The second one is the goal for visitor, to get whatever she wants. The best UX practices say that we have to properly guide our visitors to reach at her goal as soon as possible.

In modern websites we have lots of stuff to display at a time and among them displaying a sign board, which leads visitors to their final goal as well as the goal of the website, is a bit tricky. Basically this sign board is termed as call-to-action and that is clickable in case of a desktop website. While tapping gesture is required in handheld devices like smartphones and tablets specific websites.

Now, we know the value of CTA (Call-To-Action) for our website. Therefore, we have to think about it from the beginning stages of the website and other processes like initial UX research, planning, prototyping, information architecture, visual designing, coding and finally testing. When we go to design CTA button we have to have some forethought to balance the user experiences with the visual design. This way we can grab the immediate attention of the visitor without distracting user experiences.

There are some factors, which directly takes part in the success of CTA designing like:


Naturally our eyes are marking the elements at first instance, which are bigger than the other surrounding elements. Therefore, if we keep our CTA button bigger or larger than the other web page elements, we can draw the attention of the visitors immediately. This is okay with a single CTA button, but when you have more than one CTA button on the same page? Yes, solution is simple. We need to prioritize them according to their relative importance in order to achieve final goals. Thus, you can make the most important button bigger than other less important buttons.


You may have observed that when a pop-up appears, it floats on the top of the other elements of the website and catch your immediate attention as well as compels you to take ultimate action on that. The same theory can work in case of CTA button, if we place it on the top layers of the web page elements.

You may have noticed that usually we place only important elements on the top of the web page like company logo, important contact information and main navigation menu elements during website designing.

Therefore, if we place our CTA button on the top of the web page so it will indicate its ultimate importance as well as grab the attention of the visitors at first encounter because visitors start scanning of the web page from top. The same principle is true for the center of the web page so if something is placed on the center even with slight prominence it will catch the attention of the user.

Dead Space

When we leave some more whitespace for a visual element than usual in web designing it draws the eyes of the visitors towards it due to its isolated status. If we apply same principle for the placement of CTA button and leave more dead spaces and isolate it from the surrounding visual elements we can draw the attentions of the visitors easily without placing it on the important places.


Generally, we run a theme of two or three colors on our web page during website designing and all visual elements including texts follow this theme. In such case if we place an element which has color out of our theme or altogether different from the surrounding elements, the eyes of visitors will pick up that immediately. Following this theory, we can give our CTA button a high contrast color and can make it prominent.

In some cases a tie will happen when we have two CTA buttons which need to be placed on the same web page at a time. Here we can prioritize them according to their importance and can give more prominent color to the primary button than the secondary one during our web designing process.

References & more reading

50 Effective and Creative Call to Action Buttons

Best Practices to create desirable Call-To-Action Buttons, 4.5 out of 5 based on 2 ratings
Categories: Business, Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.