Home
Web Design Basics
Design Principles
Ghost Buttons - The Most Anticipated Web Design Trend for 2015

Ghost Buttons - The Most Anticipated Web Design Trend for 2015

AliceL

Nov 10, 2014

It's probably been a long time since you've heard a web developer talk about using buttons as part of their overall plan for a website. Most designers stopped implementing buttons as a design element by around 2003/2004, using dynamic menu systems and CSS to dress things up instead. But in a strange turn of events buttons have made a comeback in web dev circles, except now they're simply known as "ghost buttons" instead.

A Ghost Button Is What Exactly?

You know those transparent squares and rectangles you see on websites that you click on to perform a given function - they're called ghost buttons. The "ghost" part of this comes from the fact that they're transparent and the rest is self-explanatory i.e. they're a button. To be honest a ghost button isn't really a button as such because it lacks a fill. Describing it as shaped outline with no fill would be more accurate, but this is really just semantics when it comes down to it.

You'll also probably have noticed that most ghost buttons are larger than the normal buttons you might find anywhere else on a site, but they never obstruct the screen area behind them.

Who Uses Them?

Because they take up such a significant amount of screen real estate you'll find these buttons are generally only used on landing page-style sites because they capture a visitor's eye, and also provide a very functional "call to action" response on any site in that they successfully encourage people to click on them. Basically the more minimalist the design of a given website is, the more likely you are to find ghost buttons featured prominently in key positions on specific pages.

The most popular smartphone operating systems also tend to make generous use of ghost buttons in the design of their UI - Apple does this an awful lot. From a developers point of view a ghost button allows them to make more of the same amount of visual real estate, so it makes perfect sense to use them.

The Benefits

Beside the fact that ghost buttons are currently en vogue with web designers, are there any real benefits in using them? Here are just a few that spring to mind:

Unobtrusive - they never really obstruct whatever objects or area is behind them.
File size - because they're an outline their overall file size is far less.

Mobile apps - every single inch of screen space on a smartphone screen is valuable, so being able to overlay ghost buttons on a background app is very useful.
Draw attention - because these buttons work so well from an aesthetic point of view they also tend to hold a visitor's attention.
Visitor funnel - being able to display large buttons of this type in a prominent place allows you to better "control" your visitors' navigation of your site.
Generic - no matter what type of design scheme or typography you decide to use you'll find ghost buttons slot right in because of their clean look.
Functional - there's nothing worse for a web surfer than having to figure out where the navigation menu actually is - something which doesn't happen with ghost buttons.
Unique - designers using ghost buttons will have a competitive advantage over those that don't - they are something unique you can offer your clients.

Any Downsides?

A clever man once said that what comes up must come back down and the same is true of web trends like ghost buttons. Are there any cons from a long-term business point of view in using them? The first one to consider is they could very well be a fad, and when they fade from popularity you could find yourself having to redesign your websites.

Secondly I feel that not every web design scheme is going to need ghost buttons, but some developers will insist on using them anyway; using them where they are useful makes more sense to me. Lastly if you want ghost buttons to be a functional element of your web design then you'll need to stick to the rules of keeping them clean, keeping them readable and avoiding any kind of flashy nonsense.