Call-to-Action Button Design

What is Call-to-Action Button Design

Call-to-action (CTA) design is designing you're CTA buttons in an attractive, noticeable, and persuasive manner. You should prioritize clarity over style; however, it's also very important that your CTA buttons standout on a webpage.

Design Factors to Consider

There are several factors you should consider when designing your CTA buttons:

  • Color
  • Size
  • Shape
  • Style
  • Placement

The CTA button is what will take users further into your conversion funnel to ultimately become conversions; thus, it's very important that the buttons standout and are visually attractive enough to entice users to click on them. 

Why Are These Design Elements Important For My CTA Button Design?

Each design element listed above can be tested to uncover which variation of elements produces the highest conversion rating. Here are some tips on how to hypothesize and test these different design elements. 

Color

The color of your CTA button will help distinguish it from the rest of the elements on your page. Try to use a color that contrasts the other dominant colors on a page. If the CTA button looks similar in color to a lot of the other elements on the page, it won't stand out and users might not realize its importance. The CTA should be noticeable even when users are skimming.

Make sure that it's in direct contrast with the background or foreground of the webpage. If you're placing the CTA within the foreground of an image, choose images or CTA colors that stand out from another and don't blend in together. Don't make users work hard to find the CTA; have it stand out as much as possible while still maintaining the attractive integrity of the webpage. 

If you're using two or more CTA's on a page, give them a distinguishable hierarchy through differentiating their colors and/or size. 

A/B test different contrasting color variations to see which yields the highest conversion rates. Many websites say that certain colors perform best of all, but it all depends on how that color appears within the overall content of other page elements. 

Size

With CTA buttons, size matters. Keep the size of the button relative to the other elements on the page. This doesn't mean it has to be the same size as every other link on the page, but it should stand out somewhat unproportionally. Users should be able to find it through color and size at a glance, so make sure it's big enough to be seen even by users that are just scanning through the page. 

Play with different button sizes when conducting split tests on your website to find which size variations perform the best in terms of clicks or total conversions. 

Shape

The shape of your CTA button can also have different outcomes in terms of conversions. Whether it square edges or circular edges are more popular in terms of clicks or conversions is something you should test. See which seems more visually appealing first and test other variations to see what works best. 

Style

With style, the fonts should always be legible and easily understood. You can also test the case type of the copy, whether you want to go with "ALL CAPITAL LETTERS", "Sentence Case Words", or "Normal case words". Try to keep consistency with the other copy elements of your website. If your copy is long and you're worried about space, normal or sentence casing may work best. 

Placement

Perhaps one of the most important elements for CTA buttons is their placement. A good tip is to place them before the fold. This has lead to a lot of websites placing them within the hero image coupled with the main headline. When using this practice, make sure all 3 components (hero image, headline, and CTA button) are visually compelling and compliment one another in sentiment. That means that the headline and image should indicate what the outcome of clicking on the CTA will be. 

If you're using a longer webpage that requires users to scroll down, place the CTA multiple times throughout the length of the page. Use good judgement here as to not overpopulate the page with CTA buttons; they should come often, but not too much to distract the reader if they're trying to view other content. 

Another good practice of CTA button spacing is to place a lot of white or dead space around it. This way, the button will stand alone and be easily seen by visitors on a page. 

CTA buttons should always be placed somewhere where users are the most likely to see them. If they're placed below the fold, use scroll heatmaps to determine how far users are making it down the page and change its placement if they're not getting to that section often enough. 

Takeaways

  • A/B Test each CTA button - find the best variation among them that drives the most clicks and conversions. 
  • Color contrast - be sure the colors of the buttons contrast the other predominant colors on the webpage so that it stands out.
  • Use color and size - distinguish a hierarchy if there is more than one CTA button on a page.
  • Size - make sure the buttons are big enough to be easily seen when users scan a page
  • Clarity - ensure that they are easily readable
  • Placement - put them in places that users are sure to see them
  • What will happen next - If you're using them in banner or hero images, make sure the button copy, headline, and image all point to the action that clicking the button will perform. 
  • Use web analytical tools -  identify any problems users may be having with distinguishing your CTA buttons with CRO analytical tools. Form hypothesis' based on these observations and test variations often and thoroughly.