Ghost buttons created a furor several years ago. These ghoulish boxes were the talk of the town. However, at present, they are just a standard solution that is used to shape links and make them look finished and organized. They were not even mentioned in the list of this year’s trends though they are still here, still adorn front pages and still rule the roost.
The transparent buttons that only boast of clear boundaries are pretty versatile. Just with one change in coloring, you can quickly work them into any design. They wonderfully collaborate with flat style, Material design and Swiss-inspired minimal concepts. Used wisely, they won’t distract the attention from multimedia, yet at the same time place visual cues for readers. They also help to avoid visual clutter, maintain tidy aesthetics and encourage users to click on the link in a pleasant and unobtrusive manner. There are so many pros, so it is not surprising that designers give it a preference, even when the bright solid graphics dictates its rules. To show that there is a plenty of pep in them we have gathered a collection of websites with fragile but prominent ghost buttons.
JustCoded has a landing page that meets current trends. While the abstract background that features a trendy particle animation keeps the theme alive, static foreground elements serve as an informative device. The title is gently supported by a small elegant ghost button that fits here like a glove.
Unlike the previous example, Bar and Block uses ghost buttons that are robust, authentic and even a bit rustic. They perfectly complement the geometric vibe that is prevalent on the interface. Their relatively big size catches the user’s attention and delivers the message more efficiently.
T.C. Pharma’s home page provides visitors with several focal points and ghost button is one of them. Paired with a solid bright monotone CTA that is placed right near it, it echoes perfectly with a juicy design. Although it looks less visually weighty, yet it still has importance.
Millesimes Alsace tries to establish a sophisticated and exquisite atmosphere, and a couple of relatively big yet ultra-slim and refined ghost buttons render assistance in this matter. They nicely finish off the design and add a touch of personality.
Here the ghost button has traits that are inherent to sleek and polished graphics of Metro designs. It features clear borders, lots of fresh air within it, and tiny lettering that is set in a smooth yet legible typeface. The solution goes quite well with a clean, simple and elegant appearance.
The team maintains a clean aesthetics with ease. Although ‘welcome’ screen looks a bit oversimplified, yet it is enough to contribute to the general atmosphere and convey the required message. Much like the overall design, the ghost button captures the attitude. It radiates of subtlety and elegance thanks to its fragile lines and smooth shapes. It may seem that it lacks a proper contrast, however in such a way the title occupies more dominant position.
GearedApp employs outline boxes throughout the entire website. With its crisp appearance and soft shapes, they nicely fit the illustrative theme and emphasize vital getaways.
CSIOS Corp has a serious personality. Gorgeous bluish coloring in tandem with the absence of decorative details expresses a spirit of the company. Almost fragile ghost button that is wisely placed in the middle of the page is a small yet effective visual device that livens up the CTA.
The website features a pair of hollow buttons. Thanks to an identical look, elements have the same priority so that it is up to users to decide whether to view an event or immediately book a table. Such a freedom of choice strengthens a relaxing atmosphere.
Brewers Hill Development greets the online audience with a full-screen image slider. Each slide features a short description and an accompanying empty-styled button that due to the optimal contrast between background and foreground does not have problems in seizing the attention. It is a wonderful finishing touch.
The team brings the title into the focus. Against such a prominent detail, the CTA that leads to portfolio section loses: it has a less visual weight and looks less conspicuous. Nevertheless, it is still important and its hot yellow tone indicates this.
Nautilusfilm utilizes a symbiosis of a polished ghost button and solid play controller. The solution looks interesting and engaging. The team kills two birds with one stone: extending the functionality of one unit and making it an integral part of the design.
Vobe App demonstrates a refreshing take on CTAs for App Store and Google Play Market. They are made as traditional ghost buttons, yet they look slightly cluttered due to lots of data within it. Though, this fact does not diminish its beauty and sleek appearance.
It seems that the hollow button is almost lost among the content, which on the contrary grabs the biggest piece of the pie and takes the central stage. Extra thin borders are almost transparent against such a vivid and dynamic background. Everything states that the CTA is just an auxiliary element.
iNNsite leverages big almost square-shaped ghost buttons that immediately strike the eye. They complement the urban vibe of the front page and go well with the boxy feeling.
The website gets its crisp and subtle feminine look from various aspects, and the tiny, delicate ghost button with rounded corners is one of them. The negligible amount of content in collaboration with a generous amount of free space makes it an integral part of the composition, giving it the same priority as the sub-title.
The team is managed to give enough prominence to all the vital features by opting for a minimalistic approach. The homepage houses just several important details: streamlined navigation bar, dynamic title, and a transparent button. The latter looks clickable and splendid against the muted backdrop.
The ‘welcome’ section is built on top of a startling contrast between background and foreground resulting in excellent readability. Since all the content is set in almost the same font size, except for the main title that is slightly bigger, visitors’ eyes naturally flow from top to bottom and, in the end, settle on CTA. Its refined outline shape laconically echoes with the hamburger menu icon and line-styled logotype.
ThirdLove invites users to explore a brand-new collection in a non-intrusive fashion. Thanks to a neat and delicate ghoulish button, the appeal looks like a suggestion rather than a request. The component also harmonizes with the rest of graphical stuff that is predominantly made in contour shape.
IE University has a content-heavy front page that feels a bit cluttered. Nevertheless, this fact does not prevent it from using sleek ghost buttons. Although they are seamlessly integrated into the composition, however, their tiny frames set the necessary details apart from the content flow and place some visual anchors for the readers.
Maybe ghost buttons are oversimplified objects, yet they bear a subtle sense of elegance, refinement, and subtlety. It is not a universal tool that is able to benefit any project. It requires a proper environment where it will ‘blossom’ and not get lost in the content and lavish visuals.
UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets