Post navigation

Ghost Buttons as New Design Trend

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?

Ghost Buttons

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 as “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 center 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.

Design Elements

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

Advantages of Ghost Buttons

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 design 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 colors where a ghost button is almost impossible to recognize.

• Difficult to position

Ghost button greatly relies on its size and position for the 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.