Ghost-Cover

In 2015 there are several important web design trends to look at — from flat design to scrolling web pages. Personally, my favorite 2015 web trend is the “ghost” button.

So what is a ghost button?

Ghost buttons come in all shapes in sizes though one key element remains: they are hollow (transparent) in the middle and normally (but not always) contain a sans-serif font. Some say that ghost buttons were born out of the “flat design” trend and then became popular with web designers due to their direct “Call to Action” qualities on large images or blocks of color.

Ghost buttons can be found on sites with large background images and websites that take a more minimalist approach. The ghost button presents an elegant solution to a “Call to Action” button that entices your user to click further into the site. Even though they tend to be characterized as simple and minimal, ghost buttons are seen across a variety of sites in many different styles.

3 Examples of Ghost Buttons

Ghost buttons vary from site to site and there are a few dos and don’ts that you should consider before placing them on your website. These are three examples to show the variety of ghost buttons that you might see and why they work (or don’t work).

World in My Lens

A good example of a ghost button can be seen on the site, World in My Lens. This site exhibits a common ghost button style that you have probably seen before. This example works well because it is a contrast to the right full-width image. Another important factor that this site handles well is that the text is clearly legible inside the button.

Example-1-ghost-buttons

www.worldinmylens.com

Weather Jams

The second example can be seen on Weather Jams. I love this site for its creative approach to a ghost button. The ghost button takes up much of the page and is contrasted on top of a bright background. As you can see, this example is on top of a flat bright color instead of a colorful image. This example is especially stunning because it shows how ghost buttons can take up a large amount of real estate on a page. This solution to a “Call to Action” button is elegant and well thought-out.

Example-2-ghost-buttons

www.weatherjams.com

The “Don’t Make this Mistake” Example

Last but not least, I had to throw in a bad example of a ghost button. Even though this may look like a typical trendy design, the objective of a “Call to Action” button is to get the user interested enough to click into the site. The main issue with this usage of this ghost button is that it is fighting against the background.

One of the positive aspects of ghost buttons is that they have the ability to take on properties of the background, but that’s also a downfall if the right image isn’t selected. Even though I used a full-width image on this design, it’s not successful because it is hard to differentiate the light sans-serif text from the image.

bad-ghost-button

Hopefully these three examples make it easy to see how and why ghost buttons are one of 2015’s top trends so far. Once you know the Ins and Outs of ghost buttons you can see if they could be a great addition to your website.