Design Trend: Ghost Buttons in Website Design

The biggest trend of 2014 is something I’m not sure we saw coming. And it’s all based on one of the smallest design components of almost any website – the button.

Ghost Buttons – those transparent, clickable items – are popping up everywhere. And taking the web design world by storm. Who ever thought something as simple as a button could change the way we look at web design?

What’s a Ghost Button?

Ghost Buttons

nzk

A ghost button is created as a basic, flat shape – square, rectangle, circle, diamond – with no fill and a simple outline. It is completely (or almost completely transparent) asides from the outline and text. (Hence the name “ghost.)

These buttons are often somewhat larger than traditional clickable buttons on websites and are placed in prominent locations, such as the center of the screen.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

Ghost buttons can be found on a number of different types of websites (and mobile applications) and in a variety of design styles but are most commonly associated with one-page sites and those with minimalist or almost-flat design schemes. This style of button is also quite popular on pages that use full-screen photography, because this simple style of button is thought to not intrude into the image as much as a more traditional button.

Did you ever take a close look at the round buttons on your iPhone (running iOS 7)? Every one of the UI elements is a ghost button.

Here’s what one Designmodo designer had to say about the emerging trend:

“The appearance of ghost buttons is somehow connected with the passion for making full screen backgrounds with 50 percent opacity, and making interfaces and forms over them. Here, an opportunity arises to distribute a person’s attention between the background photo, the product’s reflecting style, and at the same time the form with ghost elements, which doesn’t shut out loud about its presence, but is still visible.”

Elements of the Design

20 jeans

Couple

Ghost buttons typically have a common set of components. While this is not a complete set of rules for usage, many of these factors are in play when ghost buttons are used.

  • The button is hollow
  • It is surrounded by an outline, often only a couple of points thick
  • It contains simple text
  • The color is often white or black
  • Buttons are often larger than traditional buttons
  • Ghost buttons often are placed prominently on the page
  • Ghost buttons can be placed alone or in small groupings of buttons
  • The element is used with flat or almost-flat design schemes
  • Small, geometric icons can be used inside of ghost buttons, but sparingly

Pros of Ghost Buttons

Habr

Mixture

So what makes a ghost button work? Is this design trend something that you should incorporate into your next project?

Ghost buttons have a particularly clean look and feel. The simple nature of the button allows the primary design of the page to really stand out more. (It works especially nice on large images.)

Ghost buttons work with almost any design schema because they are transparent. This allows the button to essentially take on the properties of the surrounding design.

Ghost buttons are continuing the evolution of the “trend of 2013 – flat design.” The only way for a design trend such as this one to really stay popular and in the now is to continue to change and be adapted with new concepts. This is a nice evolution of that process.

Ghost buttons provide an element of visual surprise because the button is different than what a user may expect.

Ghost buttons are easy to design and create. Remember to keep it simple. Ghost buttons are supposed to be subtle, no flashiness here.

Ghost buttons create a focal point for calls-to-action without being obtrusive. In many site designs, ghost buttons are the only large element on the screen (this is often what makes the concept work so well). Because of this, it draws the eye and entices users to click or tap the button. And that’s exactly what any good user interface element should do.

Ghost buttons contribute to a design style that looks sophisticated. Simple is often classy when it comes to design.

Cons of Ghost Buttons

Creative ad

Exposure

While ghost buttons come with a lot of design pros, there are some cons to consider as well. Before using any new trend, make sure to weight both pros and cons to determine if this concept will work in your project.

Ghost buttons can fall too far into the background and frustrate users. Not all users may be design savvy; some may have trouble identifying an non-traditional button style and knowing how to use it.

Ghost buttons can be tricky to use over images with highly contrasting or varying colors. Typically these buttons are white or black. If you have an image with alternative black and white spaces, a ghost button can be near impossible to see or read.

Ghost buttons rely on size and placement for ease of use. Be cautious when placing the button so that it is easy to find and does not cover a key part of your image.

Ghost buttons can sometimes overpower the image they are paired with.

Ghost button text is more complicated than click here. The words used in these buttons needs to be clearly thought out out, edited and placed in context with the rest of the design.

Ghost buttons are everywhere right now. Do you want to look like you are just latching on to a trend? Make sure this design style really works for your project before opting in to what’s popular.

Gallery of the Ghost Button Trend

Remember, the key to any trend is to use it well. As a Designmodo said about the trend:

“I believe that each and any trend born in design could be thoughtfully used. The most important is not to be addicted to it, and choose the happy mean.”

That is the key to using ghost buttons or any other trend for that matter.

So we’ll leave you with a gallery of ghost buttons that will hopefully inspire your creativity. This collection is pulled from a variety of published websites and working projects and portfolio elements on sites such as Dribbble and Behance. (Click each image to learn more and see the original source.)

Parrralax

Visage

Anyilu

Studio up

Audrey

off shore

Umbrella

Office

Feed & Sleep Tracker

Indiegogo

Paulvonexcite

Barclays

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

11 Comments
  1. Marija Zaric Jun 30, 3:26 pm

    I like this kind of simplicity in the websites including the ghost buttons that in clear and honest way tell us: click here. Comparing to the buttons a years ago these flat buttons now are more straightforward and have better visual impact especially when there is a good image.

    Even though I read that with the new trends websites started to look the same, I don’t agree and I think that in the last 3 years, webdesign is getting better and bettter presenting
    information, content in neat and subtle way with great typography.

    Reply
    +5
  2. Jake Jun 30, 11:12 pm

    I’m not fond of ghost buttons. Many designers implement them like the first example you posted, young woman in white top. The background is light, the border is light and the font is light. Readability is terrible. The designer gave a one-finger salute to anyone with vision problems. Contrast is important.

    Ghost buttons have a hollow appearance. I prefer more traditional buttons with a bit of flair. Unfortunately, websites these days often look homogenized.

    Reply
    +1
  3. Luigi Petrut Jul 1, 12:14 am

    I would love to see the conversion rate between a “ghost” and a “traditional” button.

    Reply
    +25
    • Anthony Potgieter Jul 8, 10:02 pm

      I agree with you, I have often wondered if it is making users more or less likely to click on it. I do however feel that if you have more than one call to action button it is visually more appealing to use skeleton buttons (or as this article calls them ghost buttons)

      Reply
      0
  4. Sean Jul 1, 6:33 pm

    With the sheer number of buttons online to choose from, designers can get lazy and just stick a button on their site. The ghost button has its place and i do like it. I provides a clean professional look, however if the rest of the page is too busy then a ghost button might do the job to allow for space or if the intent is to focus on the graphics rather than the button.

    Reply
    +2
  5. Pedro F.Gonçalves Jul 5, 2:57 am

    With the “ghost button” we have a beautiful and clean design. But it´s not a call to action, that draw user attention and solicit an action.
    So it’s important to know when and how we should use it…

    Reply
    +2
  6. z Jul 6, 11:39 am

    There can be a semi-transparent background color on the button while we can still see the background image through it.

    Reply
    0
  7. Brian Jul 11, 4:44 pm

    Ghost buttons are so amazing. Especially when you use the CSS “transition” property to fade a background color in on hover.

    Reply
    +3
  8. Satz Sep 1, 4:30 pm

    Ghost button is so attractive as a designer. But people around me like developers always complain of visibility.

    Reply
    +2
  9. Scott Petrovic Sep 24, 10:09 pm

    This seems more like an art trend than a design trend. A style guide idea for artists and marketing to make their branding work better in a web format. It is ‘prettier’, but at the expense of possibly making it harder to discover the functionality . Maybe it is just my definition of art vs design. :)

    At this point, the next thing is just going to be some text with an icon next to it. Heck, let’s just put some action text by itself. If it is all by itself and appears actionable, people might click it. Why else would it be by itself?

    Reply
    0
  10. Dexter Nov 4, 1:33 am

    My favourite use for ghost buttons is to establish a hierarchy – to direct users towards a preferred course of action. Say the client wants two calls to action at the bottom of a page.

    Ghost button for “more info” and then a standard, filled button for the preferred option e.g. “get in touch”.

    An alternative pairing would be “login” and “sign-up”.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters