Design of the Perfect CTA Button


Every website has one—the Call to Action (aka CTA). It is the only thing that stands between business owners and making the sale or capturing important customer information. Designing the perfect CTA button, therefore, is critical to the health of any business.

Why Buttons Are Important?

All CTA’s funnel into one single point—the button. It’s clickable and it involves action on the part of web users. The wrong placement, style, or color can have a devastating effect on the business at large. If your visitors don’t get your CTA, usually one of three things is going on:

  1. The button is placed out of their eyesight.
  2. It isn’t clear there is a button.
  3. The color of the button is unattractive or doesn’t stand out from the on page text.

The opposite affect can happen with the right CTA button.

How Color & Contrast Impact CTA’s

Clear contrast from the rest of your website is essential if you want users to take action. If your website is grey and your CTA button is a darker shade of grey, good luck getting people to click on it. Colors like red, green, and even yellow stand out and convey a sense of urgency, which is what you want. However, your color selection should be guided by your brand personality and your CTA. You can use color psychology to make a more informed decision.

Proper Button Placement

Designers use several types of patterns for site designs, and this can impact their CTA button placement. These patterns include the Z and the F pattern. The Z pattern is great for websites where content is spaced out across the page. At the end of the block of text or column is the best place for the CTA button. Alternatively, the F pattern is ideal for high text websites where the user’s eyes scan from left to right. Where the text ends is the right place for the CTA button.


Give your web visitors a reason to click ‘yes’ by using these helpful design tips during the design process.

Learn more about visual patterns and design at Gizmodo or