Basic Web Design Element : A Successful Button

The importance of headers, background and content of a website is known to all. The header which grounds all the individual pages as one allows a flow of consistency when a user navigates the pages. The background serves to create a visual interest and the content aims is the main idea the webpage sells to users. Yet unfortunately, an element that is often forgotten is the usually small, yet significant, button.

All designers strive to achieve an unambiguous and clear call to action on their web pages and good buttons allow that. A successful button brings the user to the true goal of the webpage. It plays with the psychology of humans which compels us to click on anything that seems prominent, and necessary. So how can a button be a successful one? 

#1 Familiarity
A button has to be like a friend to the user. The user should feel like they can understand the button and knows what to expect upon clicking it. Buttons with texts like “Home” and “About” are found in almost every website there is. This is because designers leverage on the familiarity users have with these texts (or even some icons) to allow users more ease and willingness to click on the buttons.

#2 Space
Whether it is above the fold, or below the fold, a button has to be placed in a manner which is obvious to the users. No matter where the button is, the use of white space will definitely help set the buttons away from the main content. The White and undistracted space steers them around the site.

In the examples above, the white space around the buttons creates a focus for users, even if it is placed near the main content on the website.

#3 Directional Cues

The goal in placing a button is to put it where the user is going to look next. It is possible to make use of directional cues from images or use the logical flow of content to predict this behaviour.

In the above example,  the directional cue is pretty clear as the man in the background faces the direction of the main button, drawing the attention of users to the button effectively.

#4 Contrast
Contrast can be defined as “the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.” Hence, the more contrasting a button is, the more it will stand out in the webpage. Important buttons, such as Call-to-Action (CTA) buttons are usually the ones with the contrast. There are also many different ways to play with contrast such as colour contrast, size contrast and shape contrast.


The button in the above example has a very contrasting colour to that of the background. This draws the immediate attention of the users.

Screen Shot 2015-09-02 at 10.29.36 pm – Use of shape contrast to distinguish buttons

The use of contrasting shapes is illustrated above where circular buttons are used amongst rectangular images and content. This distinguishes the buttons in the mess of content.

Apart from the factors mentioned above, there are possibly many other methods of making a button an effective one. What is clear is that buttons, especially CTA buttons, are an essential part of a website as it determines whether the goal of the website is accomplished. Take extra care in your buttons!

John O’Nolan (2010) Fully Understanding Contrast in Design

Jeremy Smith (2014) Secrets to Creating High-Converting CTA Buttons

Dmitry Fadeyev (2009) 8 Characteristics Of Successful User Interfaces

Marc Schenker (2015) 4 Simple Ways to Design Killer Call to Action Buttons