Alt = Pearly Kings and Queens from 19/20 century London wore clothes decorated with mother-of-pearl buttons
Sam Cranwell
Sam Cranwell
30th Jan 2017

A Guide to CTA Buttons

Optimised buttons and internal and external links can not only improve the UX of the website but can be pivotal to the success of your website. Their use and placement should always consider the needs of the end user, make choices easy, and encourage further interaction and engagement with your site's pages and services. We are all familiar of UX design and how important it is, however have you ever considered your use of buttons?

As experts in UX design and web development, we've decided to create a guide on how to best utilise buttons on a website. Read on for more.

How to use hyperlinks correctly

By ‘text links’ (sometimes called hyperlinks) I am referring to the links that often appear in the website’s copy which link to other content of interest but not of key importance.

Historically text links were displayed as underlined blue text, making their purpose clear to a new and emerging audience.

Modern coding has enabled us to change the appearance of links so they better match the company's brand and colours. Though this is cool, it can lead to poor usability.

Usability issues with hyperlinks:

  • Links look too similar to page copy and get overlooked
  • Some colour choices can make links invisible to colour blind users. 
  • Avoiding established conventions makes life harder for users

Anchor text links

Text links have been anything but primary blue for years now, we’re all OK with this. The one convention that has stayed, and users generally expect, is that text links are underlined, making them clearly identifiable within large areas of text. 

Links within text content are usually of secondary importance, and therefore should not stand out as much as the pages key calls to action. This really helps users scanning the web page for what to do next. 

Design tip - the underline doesn’t have to be the same colour as the text. I often underline the text with the primary brand colour...

Buttons on a website

The best tried and tested way to show your users what to do next is to provide them with a big fat juicy button. Sometimes simply expecting users to know that clicking on an image or explore a navigation bar is one ask too many and could lead to the abandonment of the current objective or even worse - a journey back to google!

What are the best call to action buttons?

Problems arise with buttons when we overuse them or fail to label them uniquely. Any individual web page should only have a handful of primary calls to action (ideally one), which can be easily identified by the user by style and label.  If a page is covered in buttons that look the same and all read “Click here”, then the cognitive demand on the user is increased and the chance of them completing their task is massively reduced. 

A way around having lots of buttons is having different button styles to show the different levels of priority. This is useful on landing pages that serve multiple audiences, who themselves have different levels of importance.

For example:

  • Primary actions = BIG full-colour buttons 
  • Secondary actions = Smaller inverted colour buttons 
  • Tertiary actions = Image or text links

Dividing your links up in this way will make it easier for users who are scanning your web pages looking for their next click. Therefore it helps to think of your users as people who are either:
 

  • In a hurry looking to complete a task fast
  • Gathering information but still trying to avoid irrelevant content

Benefits of buttons on a website

Buttons are great for usability and for repeatedly using your main brand colour in your designs. I often allocate the brands primary colour, or a subtle variant as the link colour, and never use it for anything else. If the brand colour is better suited for the interface background, then I might use services such as Adobe Kuler to choose a strongly contrasting complementary colour, which will clearly stand out on the interface. 

How do you design a button?

Button styles have got very simple over the past couple of years. The glass effect is an absolute No No! And overdoing a bevel should get you fired from most design studios.

As a designer who tries to see the big picture, I believe buttons work best when their colours and/or styles clearly contrast with the rest of the interface. Design trends come and go, 700 million iPhone owners can’t be wrong, and we’re already seeing a little bit more texture and subtle 3D touches making their way back into modern interfaces. 

So my advice is to follow these simple rules, and all will be just fine:

  1. Buttons are generally rectangle shapes, often filled in
  2. The text on the button should concisely explain the action 
  3. Use consistent colours/styles throughout your design for buttons and links
  4. Don’t use button/link colours for things that don’t link
  5. Primary calls to action should stand out more than anything else
  6. Make the button look different when hovering over it with a mouse or trackpad
  7. If all else fails, try a little depth or shadow on the button (like the ones on our site)

Conclusion

Defining a strong visual style for buttons and links early in the design phase will pay dividends. Combine this with keeping your key calls to action to a minimum and you’re onto a winner!

Want to talk?

We design and build amazing software and website products, and we love getting our teeth into challenging projects. Contact us today to see how we can help accelerate your business through intelligent use of technology. Contact us today or discover our range of web design services to find out more.

Related blogs