Design Trends: Ghost buttons in web design

Ghost Buttons --those transparent, clickable objects--suddenly become ubiquitous. The storm is sweeping the web design field. Who would have thought that something as simple as a button could change the way we look at Web design?

Reference: Predicting trends in web design

What is a phantom button?

The Phantom button has the simplest flat shape-square, Rectangle, Circle, diamond-No fill color, only a faint silhouette. In addition to the frame and text, it is completely (or almost completely) transparent. (hence the name "phantom")

These buttons are usually larger than traditional clickable buttons on a webpage, and are also placed in prominent positions, such as the center of the screen.

Ghost buttons can be found in various types of websites, including mobile apps, with a variety of design styles, but almost all linked to a single-page site, as well as minimalist or nearly flat-style designs. This style of button in the full screen photo background of the site is also popular, unlike traditional buttons, this concise style, is not interfering with the image of the consideration.

Have you carefully observed the fillet button on your iphone (running iOS7)? Each design element is a ghost button.

One Designmodo designer paints this emerging trend:

"The presence of phantom buttons is, to some extent, related to the way people are interested in placing an interface on a translucent full screen background. As a result, the time has come, it has distributed the user's attention between the background image, the product image and the Phantom form element, so that the ghost button does not hide the background to reflect its existence, but still visible. ”

Design elements

The Ghost Button has a series of typical elements. While this is not a complete usage guideline, most of the ghost buttons play a role when they are used.

• The button is hollow.
• It's got a circle around it, usually just a little bit thick.
• It contains a short text
• Colors are usually only black and white
• Buttons tend to be larger than traditional buttons
• Ghost buttons generally occupy a prominent position on the page
• Ghost buttons can appear individually or as groups
• Usually flat or near-flat design options are used
• A small geometric icon can be used inside the Phantom button, but rarely done

The advantages of phantom buttons

So, what makes a ghost button so useful? Is it necessary to use this trend in your next project?

The Phantom button gives the person a particularly clean look and feel. Simple and natural button, can make the main body design of the page more prominent. (especially in the big picture to perform better)

Phantom buttons can be used with almost any design, as they are transparent. This allows the button to fundamentally undertake the surrounding design features.

The Phantom button continues the evolution of the "2013 trend – flat design". The only way to become mainstream in this design trend is to continue to evolve and embrace new concepts.

The Ghost button provides a visually surprising element because the button is different from what the user expected.

Designing and Creating Ghost buttons is simple. Remember to keep it simple. Ghost buttons should be subtle, not flashy.

The Phantom button does not have to be overly glaring enough to create an inspirational visual focus. In many web design, the Ghost button is the only large element on the screen (which is why it is so effective). Because of this, it grabs the eyeball and convinces the user to click the button. And this is also a feature of the excellent user interface.

Ghost Buttons help create a high-end design style. In design, simplicity is often elegant.

The disadvantage of the Phantom button

Although the Phantom button has many advantages in the design, some disadvantages also need to be considered. Before adopting any new trend, weigh its strengths and weaknesses and decide whether to use it in the project.

The Ghost button may be too soluble in the background to confuse the user. Not all users are aware of the design; some people don't know what it's like to have buttons that are hard to identify with non-traditional styles.

Ghost buttons are difficult to handle in high contrast or color-rich images. These buttons are often either black or white. If you use a background map that is alternating between black and white, the Phantom button is almost invisible and cannot be read.

For ease of use, the Ghost button relies on a specific size and position. Place the button with extreme caution, making it easy to spot and not covering the key parts of the image.

Ghost Buttons sometimes have a noticeable effect on the picture that matches it.

The Ghost button's copy is more complicated than "click here". The text needs to be clear enough to be conceived and written, and placed in the context of the rest.

Ghost buttons are now everywhere. Want to make yourself look up to the trends? Before you choose something that is fashionable, make sure it is really helpful to your project.

Ghost Button Case Set

Remember, the key to grasping any trend is to use it well. As one Designmodo user has said:

"I believe that every trend that the design community is born with has its far-reaching uses. The most important thing is not to indulge in them, choose the mean. ”

For this reason, it is the key to using phantom buttons and other trends.

Next brings you a set of ghost button cases to inspire your creativity. This case set is collected from a variety of online Web sites, ongoing projects, and folio elements of sites such as Dribbble and Behance. (click on each image to see the source for a closer look)

Design Trends: Ghost buttons in web design