Ghost Buttons: The New Web Design Trend for 2014

In 2014, the most noticeable trend in web design is the subtle styling of buttons. Named ghost buttons, the simple transparent element has drastically shaped the look of current web design and user interfaces.

20jeans uses ghost buttons on their website.
20jeans uses ghost buttons on their website.

What is a Ghost Button?

A ghost button is quite easy to identify. A ghost button bears the distinct outlines of a simple geometric shape such as a square, rectangle, circle, diamond and other shapes with no fill. The button text and shape outline create a phantom object hence the name ghost button.

Ghost buttons are typically larger than your traditional button to make them more obvious. They are usually monochrome with white and black being the colors of choice, this is usually to maintain the simplistic feel of flat design and avoid clashing with other elements of a webpage.

Why Ghost Buttons Have Become a Trend

Image courtesy of
Image courtesy of

The ever-popular flat design style provides a great canvas for ghost buttons. The minimalistic characteristics of ghost buttons also suits the design philosophy and feel of flat design. Also with the popularity of photographic backgrounds and focus on photography, ghost buttons provide a non-intrusive solution that combines web design with user experience.

The Use of Ghost Buttons in Web Design

Since ghost buttons are heavily minimalistic and non-intrusive they really suit the current web design style of 2014. However there are considerations for the use of ghost buttons, they aren’t a one-stop solution. For example, they require a background to contrast to help form part of the button.

You should take note of how noticeable your button appears on your webpage. The size, color and placement of the ghost button(s) will not only affect how they look on your webpage, but whether it will make for a good user experience.

Ghost buttons work great when they clearly contrast against their background. White works well when used on top of dark backgrounds while black really needs to matched against very bright backgrounds as it does not maintain the same legibility as their lighter counterpart.

Typography is also an important consideration. One of the advantages of using ghost buttons is the ability to meld content and design together. To accomplish this, your ghost buttons should complement the webpage content and appear congruent with the rest of the design.

Advantages of Ghost Buttons

  • Produces a clean, simple and modern design
  • When used correctly, ghost buttons are quite obvious and effective
  • Does not distract from images and other design elements
  • Great for user experience and interfaces
  • Works extremely well with current web design trends
  • Can be used in a group or as an individual button
  • Extremely easy and simple to make

Cons of Ghost Buttons

  • If designed incorrectly, some users can mistake ghost buttons as part of the webpage design and not use them
  • Depending on your content, ghost buttons might not be the best fit for button text
  • Can be tricky to implement when used with images that have alternating colors

We predict that the use of ghost buttons will continue to rise, as they genuinely are a great addition to the flat web design style that we have all come to love over the last few years. Whether they stay as the dominant styling choice for buttons will remain to be seen. The simplicity, ease of design and satisfying user experience are great reasons for the rise in their popularity and a strong argument for their stay in the web design spotlight.

Readers, what’s your take? Do you implement Ghost Buttons in your design?