We stand with Ukraine and our team members from Ukraine.

The Community Of Over 640,000

Home ›› Content and Copy ›› 15 Ethereal Examples of Ghost Buttons in Action

15 Ethereal Examples of Ghost Buttons in Action

by Zack Rutherford
7 min read
Share this post on


As a UI trend, ghost buttons have many advantages, but implementing them effectively requires close attention to visual design elements.

Web designers, it would seem, “ain’t afraid of no ghosts.” More specifically, they seem quite fond of the transparent buttons which bear the haunter’s namesake, and the sudden explosion of immaterial outlines across a number of high profile, aesthetic-heavy websites makes a compelling case for their use. The name of the game for this trend is aesthetic appeal. Perhaps a counterintuitive emphasis, since these buttons stunningly eye catching while simultaneously aloof. Moreover, their use usually accompanies some intense design know-how.

In the gallery below, you’ll find animations, interactive elements, full-page ambient video, luxurious hero imagery, and a defacto outline of everything you can do with negative space. Unsurprisingly, there are plenty of design firm home pages contained on display.

Before you move on to the visual buffet below, let’s examine the trend itself for a few moments. Just to see exactly how these apparitional navigation cues achieve their evocative effect.

Mashing Your Phantasmal Buttons

As much fun as it is to fall in line with herd behavior for no other reason than “everyone else is doing it,” one can’t help but speculate on the actual appeal of the bandwagon. This hot trend from 2014 is riding a wave of momentum into the new year, but the real question is: why? What is it about these ghoulish boxes that gets the blood running?

The advantages of ghost buttons are many and varied

The advantages of ghost buttons are many and varied. First, they pair well with the two most dominant trends: flatness and minimalism. Ghost buttons are great at keeping the eye focused on a webpage’s primary imagery and modestly drawing the eye elsewhere once the impact of the main graphic element takes full effect. Next, they’re powerfully versatile. These buttons can be implemented on any number of color schemes, as you’ll see when you get to the gallery. They’re also excellent space savers. Considering how important RWD has become, that’s a point that can’t be overemphasized.

Not only that, but their structure usually makes them extremely legible when juxtaposed to the contrasting colors of the background. The legibility, of course, can be obscured in a hurry with a poor font or font color choice. Nothing irritates the eye more than white text over top of a brightly lit background. That’s one of a very few pitfalls of putting a ghost button on the page. Finally, ghost buttons are easy to create using either HTML or CSS.

Now that you’ve got the basics, have a look at some of the examples.

1. Haruki Murakami

Haruki Murakami

Acclaimed author Haruki Murakami immediately invokes an intriguing mystique with his website via stark white text over a close up of a predatory animal’s eye. The ominous atmosphere is complimented nicely by the ghostly navigation options that are surreptitiously animated to boot.

2. Born Group

Born Group

Announcing their recent merger, well to do content/commerce company, Born Group, takes advantage of the visceral reaction its users have to close up imagery of a scowling primate. This dignified beast fully illustrates their “Alpha” status as an unchallenged Silverback of IT dominance. The ghost button sits quietly below, in all likelihood praying it won’t be mauled by a 400 pound gorilla. In all seriousness though, this is a beautiful example of how a page can feature an important navigational cue without drawing attention away from its primary video imagery.

3. BigDrop


BigDrop, an award winning web design firm, prominently features a ghost CTA that pleasantly illuminates when the user hovers over, and even has another floating ghost mouse, which prompts the user to scroll. Really creative and attractive stuff that fits perfectly with the rest of the page’s color scheme and minimalist style. All of which takes a backseat in visual hierarchy to the picturesque NYC skyline, reinforcing their hometown loyalty and sophisticated appeal.

4. Bundlin


Bundlin is a Twitter-based content curation service with ghost buttons quietly interspersed throughout the site. Each button is used to capitalize a visual element as well as advertise a user flow. It’s a subdued example of the trend’s most common usage.

5. Nerisson


As you would expect from a freelance art director, Jimmy Raheriarisoa’s portfolio site is exceedingly stylized, and hip to the modern trend of transparent buttons. The first of which you’ll probably want to use is the English translation key at the top right. After that, feel free to look around. There are tons of interesting animations and at least one prominently featured ghost button on each page.

6. Parallax


Brightly colored and expertly implemented, digital content agency, Parallax, has a web site that’s anything but subtle. In a competitive field where it’s advantageous to stand out, that’s not exactly a bad thing. The only subdued element on the page is the ghost button, which kindly eases the visual tension, and adds a sense of elegance and structure to the overall design.

7. The Distance

The Distance

The Distance took their homepage in a decidedly different direction with a rather restrained background. The ghost buttons to add a bit of color to the offering, emphasizing the aforementioned versatility of ghost buttons. They can either relax or excite user attention as needed.

8. Powerhouse Company

Powerhouse Company

One would expect gorgeous exterior design to be the focus of an architecture firm’s website, and Powerhouse Company does not disappoint. The striking imagery put forward in the website’s ambient video is enough to make anyone stop and stare. By the time you wake from the trance, the video has looped, and you’re ready to look for an inconspicuous ghost button for further exploration of this exquisitely designed website.

9. Integra


Integra’s Real Estate showcase is another visual feast infused with the popular wraithlike boxes, and a few eerie looking circles as well. The slightly less transparent social buttons still fall into the ghost category, and due to their small size and clever placement, they distract from the ambient video even less than the actual CTA.

10. Urban Influence

Urban Influence

Digital branding firm, Urban Influence, makes the most liberal use of ghost buttons out of any other entry on the list, and the reason why is clear. They want you to focus on the personality that’s veritably overflowing from all of the video, snappy copy, and animations. The ability to build a unique persona is arguably the most important facet of a branding service, and a noisy CTA taking up important real estate is only going to distract from that. Thus the ghost button proves its utility once more, cuing the user in on where to go, without pulling attention away from the masterful visual storytelling that’s taking place.

11. Five Minutes

Five Minutes

Five Minutes is an intensely immersive online zombie survival game. It relies on time sensitive, drag and drop style controls to keep your character breathing for the next few seconds. Adding to the immersion, various ghost buttons calmly illustrate your available actions with a HUD setup that’s vaguely reminiscent of films like Minority Report or Iron Man. They’re the perfect tool to give user’s easy control of their interactions, while maintaining the evolving narrative.

12. Budoucnost


In case you were wondering if there was any corner of the internet this trend hasn’t penetrated, here’s an interactive quiz from a university in the Czech Republic. The quiz walks you through a series of questions determining whether you’re more left or right brained and then categorizes you accordingly. All the while, the ghost buttons sit in static diamond shape to help you navigate through the quiz, and to switch between English and Czech, should the need arise.

13. Panoptiqm


Digital motion specialists Panoptiqm have a website covered in colorful animations. The Ghost buttons work well with action-inducing, red outlines in order to encourage interaction from users—again—without interrupting the flow of ongoing ambient video.

14. Drygital


Drygital is a Spanish digital marketing agency that does something very interesting to expand on the ghost button trend. In addition to the standard ghost CTA, they’ve included an entire “ghost screen” that appears when you click on the navigation key. Their menu expands from the side to cover the rest of your screen with a violet filtered display that’s still mostly transparent. It’s an interesting indication of where this trend might be heading.

15. Rosewater Film


News satirist extraordinaire, Jon Stewart recently added “movie director” to his list of jobs and he’s got a stellar website to promote his newest effort, Rosewater. Along with the expected incorporeal button content, Rosewater’s website has an interesting addition: a transparent rectangle that also has an animation in one corner. Versatility proven once more.


As you can (sort of) see, ghost buttons have pretty well saturated the design world. They are used on any and every kind of website imaginable. The question now is whether or not it’s a lasting trend. What do you think? Will anyone still be talking about ghost buttons in 2016? Post your predictions in the comments.

post authorZack Rutherford

Zack Rutherford, Zack Rutherford is a freelance copywriter, with an invested interest in UX and web design. A combat sports enthusiast and poetic soul, Zack endeavors to create beauty through syntax, sentence structure, and the liberal use of hyperbole. Follow him on Twitter (@zack_rutherford) or visit his website (Zackrex.com) to read all of his innermost thoughts.


Related Articles

An inclusive process leads to experiences that improve lives and develop their full potential on the market which is beneficial for both business and people. Learn how to widen accessible products to inclusive ecosystems by using 5 simple methods. 

How to Design for Human Aging: 5 Methods for Inclusive Digital Experiences
  • In order to reach age-inclusive solutions, designers need to adopt an inclusive mindset, make empathetic decisions and apply practical methods.
  • 5 methods for inclusive digital experiences:
    1. Inclusive, in-person research and testing
    2. Focus on behavior instead of demographics
    3. Tailor accessibility guidelines
    4. Map product demands with capabilities
    5. Question interface conventions
  • An inclusive process leads to experiences that improve lives and develop their full potential on the market which is beneficial for both business and people.
Share:How to Design for Human Aging: 5 Methods for Inclusive Digital Experiences
7 min read
How to Design for Human Aging: 5 Methods for Inclusive Digital Experiences

Design tokens aren’t just something that you can easily retrofit into your existing wardrobe. They require an entirely new way of thinking and working. Learn how to start thinking in design tokens by completely changing the way you work with design systems.

Design Token Thinking
  • Design tokens require an entirely new way of thinking and working.
  • Designers can be documenting their design system, but the documentation will always be a step behind their design file.
  • The author unpacks the idea of an alternative design system and names it “the way of the future.”
  • Design tokens need to become a primary method for how you talk about and interact with your design system, both internally and externally.
  • In the end, you can get a design system that is:
    1. Future proof
    2. Accessible
    3. Able to be easily changed.
Share:Design Token Thinking
5 min read
Design token thinking

Typing search queries is gradually becoming an outdated artifact of the past and voice tech is becoming more useful and promising by the day. So what other prospects await for voice tech and why is it so special? We’re about to find out!

Voice Search and Voice Interfaces 101
  • This article covers some essential voice search statistics, how people interact with voice interfaces, what can users do with voice and why startups should care about all of this.
  • Typing search queries is gradually becoming an outdated artifact of the past.
  • The author believes that the overwhelming consumer shift towards voice interfaces will inevitably lead to the mass adoption of this technology among startups.
  • How to Design a Voice Interface?
    • Pre-design Stage
    • The Main Design (user research, customer journey mapping, VUI competitor analysis, gathering requirements, prototyping, usability testing)
Share:Voice Search and Voice Interfaces 101
8 min read

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and