Ghost Buttons: The Origins & How to Use Them Effectively

The use of ghost buttons became popular during the year 2014. However, while most web trends of this sort usually come and go, this stylish Call to Action solution is certainly here to stay. But let’s get back to the basics, just to make sure that we are on the same page. And on the same button. 😉

Ghost buttons are usually designed as rectangles or squares, and the main purpose of this element is to keep the background image clear to the eye of the beholder. We could describe these buttons as “hollow” or “transparent,” and this is why people refer to them as “ghost buttons.” It didn’t take long before this design became a standard practice in some industries (a topic which we will address in this article as well), but nobody expected ghost buttons to attract this much attention.

It seems that visitors worldwide got tired from all those promotional, ad-like call to action buttons, and although the main purpose of this design wasn’t to be cool, well, it just is. If we are still not on the same page, and you are not sure what are talking about, here is a perfect example of what a ghost button looks like on a webpage:

Ghost Button: The Origins

Believe it or not, ghost buttons have been around for almost half of a century. And where exactly have they been hiding? In the HUD. Not that hood, though. According to Steve Harvey, there are no ghosts in the hood whatsoever FYI!

The thing we are actually discussing here are Head-Up Displays (that HUD), which have been a standard piece of equipment in the military aircraft since 1960’s. This type of buttons is today also popular in video games, car dashboards, and of course – in the movies. In the military, the point of this design was to keep the viewport clear from all distractions. Because of that, all data that a pilot requires will appear in a form of a see-through, lightweight font.

In web design, the purpose of this type of buttons is almost the same – it keeps your eye candy image free of those CTA blocks and big, flat, buttons that are usually distracting the attention from the center piece, i.e.  the image.

Although they do seem as the perfect choice for stylish and cool websites, the way they are implemented, their positioning, and their surroundings are all aspects which will determine if they will be effective or not. So let’s address that issue.

How to Use Ghost Buttons

A five-minute-long browsing session will help you realize just how popular ghost buttons actually are. But are they effective as a CTA as well? Some reports and A/B tests, sadly, confirmed that they are not performing as well as their counterparts – the solid buttons. The trick to make them effective as a CTA is in their size, color and placement.  And, of course, the very title of the button will influence your click through rate as well.

Size

If you take a look at three random examples of websites, (and let’s assume that they are designed with an actual purpose) – the larger an element is, the more important it is as well. The ones that are meant to grab the visitors’ attention right there on the spot, at the very first glance – those elements are crucial for the website in some way. In Ecommerce, these elements are used when you want your leads to reach a certain page, or make a purchase. You should treat your ghost buttons the same way and make them stand out. They don’t need to be a central piece of the website at all costs, but let people know that they are important.

Color

The color of the frame and the font are also crucial elements when it comes to effective ghost button implementation. Naturally, if your visitors cannot see the button – they won’t click on it. Although there are not that many options that you can choose from in this case, make sure that they stand out! This advice may sound a little bit ironic, but don’t make your ghosts invisible! Pick a contrasting color, and don’t let them blend into the background. If you are not certain that your button is grabbing the attention of your visitors, run a split test and make sure that you are using the best version possible.

Placement

When we are talking about central pieces, and how a ghost button should be one – don’t take this advice literally. Just because it looks cool that doesn’t mean it can tell the whole story on its own. Make sure that your visitors know what awaits them if they click on it. Placing some additional content around your ghost button is only logical, but make sure that your visitors don’t have to scroll down to see it. Why? Because a great majority of them won’t scroll down, it is as simple as that. If you place your button on both the bottom and the top of your page – that’s a good call! In this way, you are keeping your content accessible and consistent, and this type of design should increase your clickthrough rate as well.

The one thing that you don’t want to do is give your visitors too many options! Doing so can lead to something called a paradox of too many choices. Apparently, if you provide your visitors with two, three or more options to navigate their browsing session, chances are they will, in fact, navigate away. Why? Because you are making them think too hard, in simple terms. If you need a full explanation, here is a great TED talk on the topic.

So, are you afraid of ghosts? Now that you know everything you need to know about ghost buttons, start your split tests and determine how effective they are for your website. If you need some tips on how to conduct AB test, you can start learning more about them here on our blog.