What are ghost buttons?

Ghost buttons are buttons with a coloured border but no colour fill – they have become very common on websites. They have inherited the name ‘ghost’ to describe their transparent image as they often take the background’s appearance.

There is an argument whether or not ghost buttons should be busted.

There are two main advantages of using them:

Style purposes

They work well on minimal or flat designed websites as they give an elegant, subtle feel to the design. Sometimes it’s the best way to add a cutting-edge look to a new or existing website.

Visual hierarchy

Their subtle appearance can give emphasis to other elements on the page. When used well they can help with the visual hierarchy of the design by giving order of importance when there is more than one ‘Call to action’ (CTA) on a page.

 

However, there are several disadvantages of using ghost buttons

 

Ghost buttons have ghost conversion

 

Decreased click through rate

Ghost buttons are popular amongst web designers who love the minimalist look – nice design doesn’t mean good design.

CTA’s need to have a strong visual presence that attracts the user’s attention. The purpose of the button is to guide users to proceed with the desired task flow – so, why make this button subtle?

It has been proven through many tests that ghost buttons are over looked and therefore have a lower click rate. Several A/B tests have found that users recognise solid buttons a lot quicker and easier than ghost buttons.

ConversionXL carried out and A/B test and found a 20% decrease in clicks, based on 10,000 visits when testing the following options:


Ghost Button


Solid Button

 

It is very important to follow best practices rather than follow design trends that don’t help users easily reach their end goal. The call to actions need to encourage user engagement and in return lead to a higher conversion rate.

 

Legibility and Contrast

Ghost buttons come with usability issues. If the button is placed over a busy image without sufficient contrast, it can be difficult for users to read the CTA. If the ghost buttons and typography are both white, placed over an image, there is often a lack of visual hierarchy to engage users which can impact conversion.

Clarity

Animation can often help ghost buttons to stand out a little more on hover however, it still may not be clear that it is a button. Take into consideration your audience and their age because ghost buttons can lead to some unwanted confusion.

The above issue may not seem too drastic but the potential impact on conversions is one that can cost the business a lot of money. Be aware of the possible implications and do not create designs that rely heavily on ghost buttons – it may not be the desired design aesthetics but we equally want to make the same mistakes others have already faced. It is important to test these styles and get real results for your audience.

 

Here are a few things to consider next time you think about ghost buttons:

  1. Use ghost buttons as a secondary CTA
  2. Consider Contrast
  3. Be consistent
  4. A/B test the ghost button vs solid button

 

You may also like to read:

Navigation UI- 5 Common mistakes designers need to avoid

6 UX principles that will guide you to create killer content