Trends 2014: The Rise of the Ghost Button

Simone Sala
Tweet
Star trek HUD UI

The 2009 Star Trek reboot used a HUD with ghost-like elements.

Though the first half of 2014 has come and gone, it leaves a handful of new design trends which will likely come to characterize the year as a whole. Amongst these 2014 signatures styles, the rise of the so-called ‘Ghost Button’ is one that caught my eye.

So, exactly what is a ‘Ghost Button’?

‘Ghost buttons’ are those transparent and empty buttons that have a basic shape form, such as a rectangular or perhaps squared. They are generally bordered by a very thin line, while the internal section consists of plain text printed in a light, sans-serif font.

These buttons, are also sometimes referred to as “empty” of “hollow” buttons, and tend to be bigger than standard colored buttons.

The attribute ‘ghost’ is due to the fact that, although they’re transparent as phantoms, they immediately grab the users’ gaze — almost in the way a ghost story can transfix your gaze.

Indeed a beautiful hollow button performs the neat magic trick of both merging itself seamlessly within a site, but, if set in a proper background and position, it can very successfully attract the users’ eyes.

Although you may find ghost buttons on a wide variety of websites, they aren’t appropriate for all sites. They are best suited to websites and applications, that have a minimalist or flat user interface or those which use large-scale photo background.

Origins of the Ghost

Though it is difficult to identify a single origin for ghost buttons, it’s possible to discern a handful of important seeds.

The term ‘ghost button’ seems to have been coined by a Tumblr blog (websiteswithghostbuttons.tumblr.com), which started documenting examples earlier this year.

The HUD

Head-Up Displays ( HUDs) have been used in military aircraft since the late 1960’s, but only really entered the popular culture in recent years via car dashboards, movies and video games.

As HUD data is projected on top your viewport, this data needs to be presented in a mostly transparent, lightweight style so as not to obscure the viewport. Although not strictly buttons, you’ll often find HUD interface elements are clear, text-based units enclosed by thin borders.

IronMan HUD

Hollywood FX teams seem to love a ‘ghosty’ UI. High profile examples has been seen in the visualizations created for Ironman’s HUD, Ender’s Game and the recent Star Trek reboot. I suspect all of these provided early inspirations for the current ghost button web trend.

IOS

iOS 7 -- ghost rise

The arrival of the Apple’s iOS 7 contributed to the adoption of the empty buttons. Although not universally loved from the outset, the iOS user interface is choc-full of minimal buttons and icons, each delimited by very thin lines of grey or blue.

Nexus 7

Later, Google also tapped into the ghost zeitgeist and from 2013 began using them in their Nexus 7 website. In the image, you can see that they opted for a transparent button identified by a white line which is deeply in contrast with the background.

Bootstrap

Bootstrap was another important contributor to the trend. In August 2013, Bootstrap 3 was released and on its homepage a prototype of ghost button was used. Though not strictly transparent, it came with a monochromatic background and with very plain traits.

Since Bootstrap was recognized as an easy and fast way to develop a website, many people started using it and, as a consequence, more and more sites were created with a propensity towards flat design and minimal buttons.

Bootstrap’s naturally simple, one colour backgrounds left plenty of breathing space for the more striking transparency of the now famous ghost buttons.

Pros

Let’s now have a look at some of the positive aspects that the ghost buttons can bring to your design experience.

  • Ghost buttons are easy to create with Illustrator, Photoshop or with any other graphic software.
  • Even though they aren’t difficult to create, they don’t necessarily look trivial or unsubstantial on the page. In fact, they can often give an elegant, finished look to a design.
  • Ghost buttons are so subtle and linear that they almost seem to give an idea of freedom. Their use will certainly contribute to lightening the visual weight of your design while evoking a sense of order.
  • As ghost buttons are mostly empty space, they will integrate easily with many other basic design elements and styles you might choose.
  • Ghost buttons are a hot 2014 trend, so they’ll certainly give your site a very current feel.

However, ghost buttons do have some negative points that you should take into consideration when integrating them with your website up.

Cons

  • While we noted that ghost buttons are very popular right now, they aren’t a magic design bullet. Using them can put you in danger of disappearing into the crowd. You’ll need to carefully consider how to use them in order to stand out.
  • These buttons do break from the most established web design concept of ‘button’ – or even real world buttons for that matter Sometimes just spotting a ghost one can be difficult, particularly if it hasn’t been placed wisely.
  • The transparency of ghost buttons can lead to problems of legibility. Photographic backgrounds and bad color choices can combine for bad results. We’ll see an example of this issue in the last section of the article.

The Gallery of Ghosts

Bilderphoto.com

Bilderphoto

The first example is by bilderphoto.com, a website which uses a full screen photo as background.

The button is central to the goals of the site, inviting us to click in order to discover more about the company. It is nevertheless, I believe, not well placed. Indeed, since the colour chosen for the button is white, the word ‘imagemaking’ is not completely in contrast with the light dress of the girl. As such, the readability is significantly affected.

On the positive side, refreshing the page will get you different background images without this problem.

UnionRoom

Unionroom

The next website is from UnionRoom, a web design and development company.

Rather than simply setting an image as background but they use a halftone video. All the services they offer are expressed through a flat and animated user interface. If you want more detail on what they do, you can click on the white ghost button.

Unlike the previous example, this one stands out clearly from the background which tends to a darker tonality. This button follows all the main feature of a good empty button because it can be spotted without efforts and, at the same time, it’s not an extraneous part from the rest of the website.

Worldbackupday

Example3

The last example regards a website that has a flat designed user interface. We are speaking of worldbackupday.com.

This site, which reminds us to backup our files, is based on the contrast between light-blue a white. You’ll notice the presence of two ghost buttons which are elliptical.

They are also clearly recognizable as buttons and they can’t be confused with the background. The guys who worked on this project did a good job.

So, is this a style you’ve been using?

Seen any examples you really like?

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.

  • Tatsh

    The examples you gave are somewhat acceptable. The reason is because they all have borders. So the ghosting effect is not really there. I can clearly see those are buttons (clickable/tappable items). I can point out examples of ghost buttons I absolutely despise:

    On iOS 7 sometimes I cannot tell if something is a button or just a bit of text (mostly due to lack of border and use of the same colours as text). You are forced to read it (as 90% of the time they are just text). This is probably a small waste of time compared to clear indicators such as borders and icons. Apple realised the ‘hate’ with iOS 7.1 and added an ‘accessibility’ feature to add borders back to the buttons on the navigation controller primary (and also UIButton, etc). It either breaks apps sometimes or makes them look ugly, and I think it is an insult to put that option under ‘Accessibility’. Being unable to read through a bad design is *not* a disability. Most certainly young people can see it but many older people have trouble with it. Also the ‘design’ of these borders when you do enable the feature are quite ugly (semi-dark grey background button shape behind light blue text by default). For the navigation controller, by default with blue text, there is only indicator left that it does anything which is the arrows adjacent to the label.

    Another example is the Amazon app on iOS, running on iPhone. The items to pick (‘Your orders’, ‘Wish list’, etc) from is now a list of black text on grey background, with *nothing* to indicate these items are clickable. The only indicator is after you tapped the screen to see what is going on (where the links turn to a different colour). That is just an assumption you have to make (are they thinking: ‘they’ll all figure it out eventually’? Is that how UI designers work now?). On iOS 7 the default design in an app is to make clickable buttons (UIBarButtonItem, etc) blue, similar to the web. I think it is a terrible design decision to go back to the neutral colour used on the web (black, or white in reverse) for a *menu* of ‘buttons’.

    Oddly enough Microsoft has done a better job in Windows 8. Although nearly everything is flat, they kept all indicators that buttons are buttons and links are links (links get underlined on hover, sometimes different colour; links do not appear to be intended for tapping except in the web browser).

    I can understand if anyone wants to say that links and buttons are the same thing in functionality, because we have treated them the same for a long time (under non-semantic usage of HTML tags primarily). Links tend to not get borders, especially because they are often within text. That does not mean borders are unnecessary in every design. If you look at most web GUIs you would see few borders because we tend to think of them as very ugly other than for indicating a button, a wrapper around something like a text box, etc.

    Borders are not necessary everywhere either. Facebook’s UI has a lot of spots with ‘buttons’ that are not bordered up (I also do not think they readily use the tag on all these ‘buttons’). They have a decent design overall with good use of different colours to indicate what is text and what is clickable. Same goes for Twitter.

    • Alex Walker

      Plenty of good points, @disqus_BC7BBXjMmb:disqus. The lack of borders on important iOS buttons has been a sore point for lots of people.

    • http://stylesie.net/ Colin Styles

      @Tatsh, bring on the hate I disagree because … I got nuthin.
      You nailed it dude.

  • M S

    This is a button

    This is not a button

    This is not a button

    This is a button

    What is this?

    • Tatsh

      Kind of my point. Imagine if electronics were designed this way. All capacitive buttons but with no borders, just text.

  • http://twitter.com/lecklin Tuomas Lecklin

    Honestly, the first example is a dreadful case. It looks more like a glorified heading. The other two however have wording that acts as a call to action, and especially the third example even includes little icons inside.

    The last two both imho are perfectly clear that they have some interaction available, and I don’t see any problem.

    I guess the question could be, do buttons need to differentiate from links inside content. The ghost buttons are basically graphic anchors. Quite pretty ones at that.

  • http://www.KeithJamesDesigns.com/ Keith James

    I’m sure Jakob Nielsen can come up with 10 reasons they are actually bad design. Just because something is a trend doesn’t mean it is good design. You have to design for the masses not for those that design for a living. Yes, I think they look great but I don’t think anyone reading this article is a typical user.

    It’s easy to leave in an echo chamber. When you get into the real world, a button must clearly be a button. I’ll give up a little on design in favor of usability. Your design must be aesthetically pleasing but not at the cost of functionality.