Call to Action Buttons Part 2: Placement

2 mins read

In the first part about Call to Action buttons, I talked about the usage of color and how it affects the user’s behaviour. As mentioned in this article, a CTA-button has 4 important tools: placement, shape (and size), message and color. In this second part I would like to give you some pointers about the placement of buttons.

Just a few things to keep in mind when placing CTA-buttons into your design.

Prominent Positioning

I recommend to give your CTA-button a prominent placement, but remember to take your entire page lay-out into account when making this decision. If you prefer to put it into the footer of the page, you should reconsider the fact if you need a CTA-button at all. Maybe a regular text link would be sufficient. It is very easy, important aspects of your design get an highly visible place on the canvas or it is not important enough.

How to give a Button the Space it Deserves

An effective way of making your button stand out from the rest of the design is to make good use of white space (read this great article about white space on Boagword). Seperating the button from areas with many design elements will give the button more visibility and makes it feel less cluttered. Be careful not to exagurate, otherwise you’ll loose the logical connection.

Logical Link Between Intro Message and CTA Button

It’s a good idea to use some kind of intro text, such as customer testimonials, to support your call to action button. You give your visitors a reason to click the button and it will make it easier for them to figure out what will happen when the button is clicked. If you decide to use a supportive message, make sure to place it near the button.

Also Read:  7 Reasons Why Better Website Design Services Will Never Die

Imagine you want to convince people of using your software package by writing down all the benefits point by point in the top of your page. A CTA button saying “Try out our software package for free” is nowhere near the header. How will people take action?

The Fold

A much talked about issue is called the fold. The page fold refers to the first frame your visitors see when they visit your site. Or as Jacob Nielsen explains: “Viewable without further action”. Although people learned how to use the scrollbar and scrollwheel, users spend about 80% of their time above the fold. Keep your most important parts of your webpage, such as your CTA, in that space.

The Better Examples

IconDock and MailChimp did a very nice job with their CTA buttons. The buttons are placed in the top center of the page and have enough white space around it to let them stand out from the other elements. The gap between the button and the text is just right and confirms the logical connection.

website of MailChimp

Other articles in this series

The perfect call to action button is not just about its placement, which is why I have written a complete series on CTA’s. The series are completed with the following topics: color, shape, size and the message used in the CTA.


Tagged with , ,

Related Articles

I'm the creator and editor of, a blog about on Web Design, User Experience and Usability. Currently I'm working as UX Lead for Home24, a leading online shop for furniture and home accessories, based in Berlin, Germany. Follow me @paulolyslager or google+.

15 responses to “Call to Action Buttons Part 2: Placement”

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

Popular UX books

100 Things Every Designer Needs to Know About People - By Susan Weinschenk
A Project Guide to UX Design - By Carolyn Chandler
The Elements of User Experience: User-Centered Design for the Web and Beyond - By Jesse James Garrett
Don't make me think - By Steve KrugPopular book
Designing Web Usability - By Jakob Nielsen
Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences - By Stephen P.AndersonPopular book