December 27, 2016 | Kayla Hollatz

Web design fads come and go, but one trend in minimalist design that seems to be sticking around is the ghost button. For companies that want a clean aesthetic, these buttons seem to be a no-brainer, but should they still be in use?

First, let’s clear something up.

What the heck is a ghost button?

Before you start picturing your CTA button shaped like Casper the Friendly Ghost, a ghost button is a button with a thin border placed against transparent background in a simple shape.

They’re also known as “hollow buttons.”

Some think ghost buttons are modern and versatile, but we have to ask: are they helping or hurting your conversion rates?

If not used correctly, the answer could be downright scary.

Why ghost buttons just aren’t doing it for us.

Storq has both appealing niche photography and a clean aesthetic, but take a look at this sales page. You can hardly see there’s a button, much less that it’s prompting visitors to “buy now.” A white-bordered button on a primarily white background makes it difficult to find — or read:

Many customers won’t be willing to stay on a sales page long enough to find the “action item” and will eventually move on if the CTA is not straight-forward and, let’s face it, downright obvious.

Iuvo has great vector icons for their niche but there’s something a tad off about this website. The white text on the homepage and the vertical navigation bar on the left side stand out well against the dark photograph in the background, but the button text is teal:

It’s also displayed over the lightest part of the background.

On this site, pretty much everything stands out BUT the button. When readability suffers, so do conversions.

But there’s hope! These folks got it right.

Studio Up’s use of ghost buttons is working for us. The background stays the same hue of blue and the amount of text is minimal, making the ghost button stand out (more so than previous examples, anyway) on the homepage:

It’s also centered in the middle, making it the focal point of the website with no other buttons competing for that click. White is the only text color, which provides clarity for Studio Up’s visitors.

20 jeans shows it’s possible to have a photo in the background and be able to use ghost buttons (somewhat) effectively. The models in the photo are placed to the right, making the black text on the left against the white backdrop pop:

What would have made this button stand out even more is if there was a color differentiation between the text and the ghost button.  The bold text naturally guides the eye down to the ghost button.

Like Studio Up, there is only one button on the homepage above the fold which makes for an easily found CTA. The CTA copy also includes the action word “shop” and is clear about what will happen when visitors click the button.

Of course, these were just a couple of examples where we thought ghost buttons were *more* effective than normal, but of course what do we know without seeing the conversion rates for these websites?

Here’s what the experts are saying:

But don’t take our word for it — here’s what a couple of our favorite conversion optimization experts had to say about ghost buttons and their effectiveness over on inbound.org.

Oli Gardner asks,

“If a button lives on a page, but nobody clicks it…

…does it even exist?”

Oli’s seen more landing pages than anyone else on the planet Earth, so we’re pretty sure he knows a thing or two about what kinds of CTA buttons work best, and evidently he’s not a fan of ghost buttons.

And our good friend Angie Schottmuller is a huge proponent of using complementary colors for call-to-action buttons, so the entire concept of ghost buttons irks her:

“Ghost buttons drive me crazy. The concept is a designer’s fantasy trend that should die.”

She goes on to say it’s not about what conversion experts think; it’s what users want. If they don’t know what’s clickable and what’s not — especially on mobile devices where the “hover” option isn’t an option — how do you expect them to convert?

Wrapping it all up.

If we have one message about ghost buttons, it’s to proceed with caution. Ghost buttons fail when aesthetics trump functionality and readability. Websites are ultimately designed to perform, not just to look appealing to the eye.

If you are using ghost buttons, be sure to:

• create contrast between the button and its background.
• make sure your CTA copy is legible and clear.
• and most importantly, A/B test.

Maybe ghost buttons work the best for your audience…

…but maybe they don’t. You never know how well your CTA buttons could be doing if you’re not testing them — along with any other conversion optimization aspects of your site, of course.

Where have you seen ghost buttons fail — or succeed?