The biggest design trend of 2014 is surely the new ghost buttons, which is one of the smallest design components of a website yet worthy to talk about. So, what are these ghost buttons? And why they are named so?
Table of Contents
Ghost button constitutes a basic shape (like rectangle, square or circle) with a transparent background that is outlined with a solid thin border. The main reason why they are called “ghost” buttons is their ability to perfectly blend into the composition, thus making them hard to distinguish just like a ghost. However, if they are embedded with a proper background, they can achieve a completely opposite effect, becoming the ultimate point of attraction.
These buttons are quite different from the usual buttons and are located at noticeable positions on the website, like the centre of the screen.
You can find these buttons on a number of websites and mobile applications, but usually, these are associated with single-page websites or the ones with flat design schemes. The use of these buttons is getting quite popular on web pages that portray full-screen photographic images, as these buttons don’t intrude into the image like the traditional buttons.
The common elements of designing for ghost buttons are given below. Although this set doesn’t constitute all the elements, these are among the most notable rules and thus, worthy to mention here.
The button is empty
It is surrounded by a thin outline
It includes simple text
The color is often black or white
Buttons are larger as compared to traditional buttons
Button is often placed at the centre of the page
Ghost buttons can be stand-alone or may come in group
Usually associated with one page websites or flat design schemes
There are numerous benefits of incorporating ghost buttons on the website.
Clean look and feel
Ghost buttons have a clean and cutting-edge look. This feature of the button allows the basic design of the page to stand out, especially in the case of large images.
Ability to embed in any type of design
Whether the design is clean or grimy, light or dark, ghost buttons will suit any kind. Your design will never look messed up.
Acts as the focal point
Though being transparent, they clearly stand out against the background and easily catch the user’s attention; thus, acting as focal points of attraction.
Add an element of surprise
Ghost buttons add an element of visual surprise as the button is quite different from the traditional buttons.
Easy to create
Ghost buttons are quite easy to design and develop. Their simplicity is the reason.
Add sophistication
Ghost buttons are simple and simple is often royal when it comes to designing.
Disadvantages of Ghost Buttons
There are a few disadvantages of ghost buttons that are also important to be mentioned here.
Difficult to recognize
Not every user is designed intelligent and may face difficulty in recognizing these transparent buttons and get frustrated.
Difficult to incorporate on flashy images
Ghost buttons are usually white or black. It can be very difficult to place them on images with contrasting or varying colours where a ghost button is almost impossible to recognize.
Difficult to position
Ghost button greatly relies on its size and position for ease of use. Designers need to stay quite vigilant while locating these buttons so that they are easy to find and don’t cover the key part of the photograph or image on the page.
Ghost buttons are actually continuing the evolution of the flat design trend of 2013, but the key to any trend is to use it thoughtfully rather than blindly following it.
As a rule, designers should not simply embed ghost buttons into an interface and leave them as such; they should strengthen them with soft typography, thin outlines and solid backgrounds. This adds an element of creativity to the ghost buttons and makes them an essential part of the overall design of the webpage.
As such, these buttons make the design look more delicate and sophisticated, but require to be incorporated carefully.
