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.
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.
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.
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:
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.
Below are a few examples that you can re-create with HTML and CSS. Just click on the image to learn how to make a button on it.
What are your thoughts on ghost buttons? Have you ever made one? Leave a comment below!
Copyright © . All Rights Reserved