Ghost Buttons – The Brand New Design Trend

Ghost is a mysterious and cryptic creature that triggers such associations as consternation, transparency, clarity as well as charisma and attractiveness. Though it seems that it has nothing to do with a website design, in fact, this frightening, yet adorable “phantom” manages to transfer its genetic traits into graphics, adding to integral elements its strong appeal and personal charm.

The so-called “ghost” buttons are today’s talk of the office and are apparently a prevailing trend that is growing day by day. So, what actually does an almost translucent entity have to do with it all? Let’s figure it out.

Ghost Buttons in Web Design

“Ghost” button - that also can be called “naked”, “empty” or “hollow” - represents a basic shape with a transparent background that is delineated with a help of a solid border that is usually incredibly thin. It perfectly blends into the composition, becoming an essential, almost indistinguishable part, like a ghost. However, if it is accompanied by a proper background and set in a specific environment it can achieve quite the opposite effect, becoming a focal point of the page, which immediately grabs users’ attention. This type of graphic naturally delivers elegance and subtlety to the project that, as a rule, is wisely bolstered by refined ultra-narrow type and contour-style graphics.
Our list covers fresh examples of website designs that realize this increasing trend.

1. Nuji

The landing page of this iOS app website has a lack of textual filling, but it's for the best. The vibrant heavily blurred backgrounds of slides clearly underline content and easily make the huge call-to-action contour-style button stand out from the canvas.

Nuji

2. Iuvo

The website not only features several “ghost” buttons but also has line-style icons that effectively enrich the design, giving the interface an exquisite and refined appearance. Every navigation item is supplied with a small animation to provide a more pleasant user experience.

Iuvo

3. Papaya

Papaya is an event-oriented website that gives you an opportunity to book tickets for upcoming festivals. The home page is skillfully split into 3 equal sections each of which has a relatively huge “naked” button that are extremely difficult not to notice.

Papaya

4. Charles-Axel Pauwels

The heavily blurred backdrop of the front page lets every foreground element easily stand out even despite having a highly subtle appearance. Everything looks sophisticated and delicate mainly due to an ultra-narrow type, line-style logo, semi-transparent panels and of course, “hollow” buttons placed in the center.

Charles-Axel Pauwels

5. Visage

The designer employs an outline style for the majority of buttons. Thus, every section where a CTA button is needed is populated with such graphics. The “Learn More” and “Sign Up” buttons go native with the front page design and are able to instantly catch the eye.

Visage

6. The Distance

This site features 3 neon-like colorful “ghost” buttons that go perfectly well with an urban background, effectively embellishing it. They seem to be a part of the whole composition yet they still are extremely noticeable.

The Distance

7. Trippeo

This design looks bright and fresh. The designer makes use of a garish, catchy color palette that nicely collaborates with a narrow white type. There are only 2 main things that fall within the focus: the content and the canvas. The latter is presented as a wonderful gradient-style backdrop that helps the “empty” CTA button to loom, so you definitely won't miss it.

Trippeo

8. Union Room

The website engages the online audience with a video background that depicts a workflow of the agency. The team wisely applies a halftone effect for making the backdrop look more solid and appropriate for displaying foreground content. Thus, the elegant “naked” buttons that complete the content section look especially prominent.

Union Room

9. CTEMF

Though the designer lays great emphasis on textual filling, making every slide look information intensive, the “ghost” button that is placed at the bottom of each page is really easy to notice; it certainly helps to motivate people to read more about the event.

CTEMF

10. 20Jeans

Here, the “ghost” style assists to cultivate a simplistic feel that goes well with the overall design. The website looks neat and spacious due to lots of white space, moderate greyish coloring and of course, similar line-style icons.

20Jeans

11. NZK

An absence of thick solid borders that are responsible for noticeable appearance of "ghost" buttons make it look almost translucent, however the designer wisely plays on a contrast, effectively muting the backdrop and thereby giving a visible contour to the graphics.

NJK

12. The Offshore Partners

Much like the previous example, thanks to a striking contrast between the dark backdrop and light content, the “naked” button looks perfectly legible. Its high “clickability” is also achieved due to the compactly arranged text block, which precedes it.

The Offshore Partners

13. Richard Outram

Here, the CTA button looks like a lonely spot that also plays the role of a focal point for the visitors. The background and text box have a solid appearance, whereas the button has the opposite effect that sets it off the canvas. For anyone not fluent in Sheffield Speak, 'Ey up' is a Northern English way of saying 'Hello'!

Richard Outram

14. KangoMedia

The landing page boasts of its "gigantism". The designer employs enormous typography for getting the readers’ attention. The line-style button “Request a Quote” is also huge; it pairs well with the rest of the content and is a nice finishing touch.

KangoMedia

15. Equinox in Austin

The designer resorts to a winning combination of subtle narrow type and a sleek “ghost” button. These 2 elements effectively support and interact with each other, establishing a pleasant atmosphere.

Equinox

16. Studio Up

Here, the designer relies on 2 main aspects which are designed to entice users to scroll down and explore the website. The landing page exudes an image of simplicity and neatness, so the subtle “ghost” button feels right at home.

Studio Up

17. Guillaume MARQ

The contour style is entrenched in the project. The designer applies this solution to essential graphics, despite the video background that makes it look a bit illegible.

Guillaume MARQ

18. Jaspur

The hero page looks truly minimalistic and amusing. The funny mascot, small text block and regular contour-style button maintain clean and neat aesthetics.

Jaspur

19. Verbal plus Visual

The button “View Our Work” immediately gets the users' attention. It echoes ideally with a slick typography and darkened image background. Also the designer utilizes much lighter coloring for several elements in order to set their high priority.

Verbal plus Visual

20. Nois3

Here, the designer also takes on a powerful mix of exquisite typography, outline graphics and “naked” buttons. The latter adds a surprisingly delicate touch to the design.

Nois3

Conclusion

As a rule, designers don't simply incorporate “ghost” buttons into an interface and leave them alone; they bolster them with either delicate typography and thin contour-style graphics or solid backdrops. Such support effectively contributes to its call-to-action feature as well as making it a significant part of the composition.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.