Who you gonna call? Ghost buttons!

Well you can’t actually because they’re a design element used for navigating websites rather than a tangible way of communicating with a paranormal emergency service. Unless of course the button is a click-to-call in which case…

I think I’ll start again.

We published our 17 crucial web design trends for 2015 at the beginning of the year, and this is part of a series of posts looking at each trend in more depth.

This week it's the turn of the transparent element known as a ghost button. 

Although they are essentially a call-to-action, ghost buttons aren’t meant to distract you, just attract your attention in a subtle way. 

They are transparent but have a recognisable shape, are bordered with a very thin line and contain light sans-serif fonts. They’re perfect for designers not wishing to clutter their sites and show off large background imagery, but still need to provide navigation for users.

Here are 12 phantom-like examples.

Deneen Pottery

Here the more direct ‘sales’ related button is kept subtly less significant than the button to view styles.

TBS

Note that the message of the button is ‘enter’, rather than ‘shop’.

Over

The ghost-button appears right at the bottom of the product page. Its subtlety comes easy as it’s a white background, but this would work just as well whatever the colour.

Ikea

‘A Good Day Starts Here’ is an interactive video based on the theme for this year's IKEA catalog. By clicking on the button at the bottom of the screen you can view information based on the featured product.

Geox

Check out the brilliant interactive video for its Amphibiox range, which eventually leads to the product page below.

Vaughan

Although there is a lot going on in this tessellated flat design, the ‘explore now’ manages to attract attention when the visitor is ready for more info.

Vizio

Never underestimate the persuasive power of some subtle oak flooring.

O’Neill

Providing options for men and women clothing ranges, with a subtle border change.

Lush

Not letting the vibrancy of its products be hidden behind a solid call-to-action.

The Prince Ink Company

Although the company has added a second border around the button for style, this isn’t really necessary for encouraging click-throughs.

Breezy Excursion

Great looking button, although it’s a shame about the repetition of ‘now’.

Tic Watches

I’m including this as it proves that despite the lack of border around the button, you can still draw attention with just a minor change in texture.

Further reading…

For more design trends from the blog check out:

Christopher Ratcliff

Published 11 February, 2015 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

You might be interested in

Comments (6)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Chris Monkman, Web Developer at E-Dzine

I prefer still having a touch of shading underneath a ghost button to at least signify that it's a button. It's also at least a bit different (since definitely 4 and upto 8 if you want to argue of the sites look pretty much the same. )

almost 3 years ago

Avatar-blank-50x50

Deri Jones, CEO at SciVisum Ltd

The main use case here: seems to be:

'Make navigation more obvious for the user when you have a large photo or 'one thing' type page: and you are offering the use only one way forward'

Users are familiar with clicking on things to drill in/navigate: but on a large photo: they can be left wondering' do I just click any old where or what?' - so a button helps: and a subtle ghost button is less obtrusive over the uncluttered big-photo-page look.

But the Vaughan page is different: offers several different ways to move forward, for different things on the page: some are text links: one is the ghost button.

I wonder if more knowledgeable UX guys than me, have views on mixing formats for the 'take me to the more detail' likes across the page.

Ghost are good looking, but would be good to ground how we use them on UX and not just the look :<)

almost 3 years ago

Avatar-blank-50x50

Eleanor Holmes, Freelancer at SonderTribe

I would love to see some eye tracking on these.

almost 3 years ago

Adrian Berry

Adrian Berry, Product Owner - myhermes.co.uk at Hermes Parcelnet

Every time I see a ghost button I'm reminded of my dad's old Bang & Olufsen stereo (http://www.beophile.com/wp-content/produits/beocenter7007.jpg)

almost 3 years ago

Avatar-blank-50x50

sena jeffers, chief digital officer at online amiga

Thanks for some great examples to inspire. While I truly enjoy this particular trend I still think you need to think about when to use them. Every eye tracking study we've done they lose out to a more solid button. We now often use them as a secondary vs. main call to action button like the pottery example. Other times is for a main navigation if the focus needs to be on a big mega element and on fun interactive pages (like ikea). We have a phrase "just because you can doesn't mean you should" which I think applies here.

almost 3 years ago

Hector Hurtado

Hector Hurtado, Creative director at graphility Ltd

I agree with Sena above in that the affordance of these buttons is not close yet to a solid counterpart. It may work for Deneen Pottery because of the obvious counterpart. It might even work for Over because the button is not on the image itself. But other than that, most non digital natives will not even "see" the button here. Be careful, and consider your audience before jumping on the trend.

almost 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.