Ghost Buttons: The Good, The Bad, The Spooky: Part 1

Ghost Button banner

Ah, the ghost button. We saw its emergence over the last couple years, as web design saw a shift towards minimalism and flat design. While it’s hard to deny the beauty of the ghost button, we wanted to explore the effectiveness of this CTA treatment.

Yep, we even have ghost buttons on our site.

So, what exactly is a ghost button?

A ghost button, which is also sometimes called an “empty,” “naked” or “hollow” button, is usually a transparent or semi-transparent button, with a thin outline, and a CTA (call-to-action) text within the frame. Ghost buttons are used to have a strong contrast against their background color or image, so they can stand out and draw attention.

What are the pros and cons of ghost button?

Here are the positives of using a ghost buttons in your designs:

  • They are trendy – They feel modern, hip and “now” to many web users.
  • They are often larger than a typical button, so they can draw attention.
  • They are clean, simple and are pleasing to the eye. They work with many treatments and typefaces.
  • They don’t obstruct background images and still allow the CTA to stand out.
  • While they work well as primary buttons, they can also easily be used as secondary CTAs without confusion.

This site perfectly balances a primary, solid CTA next to a secondary ghost button.

And of course, the drawbacks:

  • They may not always be recognized as a button. 
  • Since they are trendy, there is a chance they will feel dated quickly.
  • Since they are often laid over images, the legibility can be difficult and needs to be carefully checked on different screen sizes.
  • The call-to-action needs to be extremely clear, to avoid any confusion.
  • Users have been trained to ignore grayed-out buttons, so when a ghost button or button lacking contrast is used, our first instinct may be to overlook it. Read more about the concept of affordance here.

These ghost buttons are not only difficult to read, but they are one of the last element on the page to stand out.

When should you use a ghost button?

There isn’t a lot of definitive research about whether ghost buttons are more or less effective than traditional buttons, and many experts agree they can be used effectively with the proper contrast and language. 

However, Unbounce Chief of Conversion Marketing Angie Schottmuler disagrees on this stance:

“Ghost buttons drive me crazy. It goes against usability. The concept is a designer's fantasy trend that should die. The only time I find this tactic useful is when a client insists in having two CTAs on the page, and I basically want one to disappear. Ghosted buttons have ghost conversions."

Ghost buttons don't work in all instances. On light-colored backgrounds, use dark ghosted or solid buttons to be effective.

Here at Elevated Third, we began to wonder if ghost buttons could be hurting our click-potential, so we ran some tests to see if changing our ghost buttons to solid buttons could improve our conversions. Read more about our results in Ghost Buttons: The Good, The Bad, The Spooky: Part 2.