Advanced Design Tip #1: Intro to Call to Action Buttons

Due to popular demand, today we kick off a new series of posts: Advanced Design Tips with Joe Deobald, Brand Manager and Creative Director at

Call to action buttons: Let your visitors know what’s important

Congratulations! So you’ve finally got your site up and running. You’ve added products and great SEO content, and you’re ready to launch your site. You even have a great offer that you want your site visitors to buy. With Call to Action Buttons (CTAs), you can literally guide your visitors that awesome deal on a hand bag, or to join your special newsletter.

First off: let’s talk about what a CTA actually is. Simply put, it’s a button that tells the user to perform an action like “Buy this now!” or “Learn More…”
Before just throwing any old button up on your site, you need to plan it out. You want it to grab their attention – not just with a bright orange or green, but the text needs to be short, descriptive, and entice them to click. You want to tell them what to expect once they click the button: you need to build trust. Think about the questions and expectations your visitors will ask before making the decision to click. If it’s a free trial, then put that in the CTA.


The old wives’ tale that size matters isn’t a stretch in this context. For website design, the larger the element is, the more important it is. This is a main focus on your website. You need to figure out exactly how important the action is, and design your buttons accordingly.

Don’t be afraid of making a large button. With the sample below, you will see that the CTA is about 20% larger than the logo itself.

People are already going to know the name of your company since having the logo at the top is standard throughout the web. But you don’t want them to focus on that. You want them to click on your GIANT CTA so you can create the connection with them.

Now if you use multiple CTAs on your website, you need to decide which one is more important. Having multiple CTAs isn’t a bad thing – what’s bad is having them all the same size.


Now we move to color – one of the single most important things when designing a CTA button. Colors in general portray emotion, and have a great impact on how the user responds to the elements. When choosing a color, make sure that the color allows the user to understand its context, and that it also compliments the rest of the website, while still standing out. It’s critical to ensure that the user will actually take notice of your CTA. The examples below show great contrast between the CTA button and the rest of the site, while still complimenting the site itself.


So now you have a great looking CTA button that reads well, stands out and gains trust from all who see it. But where are you going to put it? The best solution is to utilize the whitespace around your button to help maintain focus on the importance of the element. Whitespace isn’t just a bunch of white area on a page, it refers to space given around any element on your website. This is a great and effective way of making it stand out in areas where there are other elements present.

The example below shows how an effective amount of whitespace greatly increases the focus on the CTA, even though the button itself isn’t too loud.


These are just a few of basic strategies around implementing CTAs on your website. Check back next week, when we’ll explore button placement, secondary options and using copy to enhance your sell.

Comments are closed.