Web design trends: ghost buttons

We continue with the series of articles in which we have been presenting some of the trends in the field of web design, and analyzing their evolution, whether they are going to be consolidated or not, pros and cons, and so on. Small details that allow us to present a clean, well-assembled and orderly website, with photos and styles, invites you to continue browsing and discover what it offers us.

One of the clearest changes of this last year in web design, which has gone unnoticed by many, are the so-called ghost buttons. Ghost buttons, also called transparent buttons or ghost buttons, are flat, unfilled shapes that are often used for call to action. In fact technically a ghost button is not exactly a button itself because it lacks padding. It would be better to describe it as a framework, but this would be just semantics.

They tend to be simple buttons, with a fine layout, without filling, with simple texts and somewhat larger than the rest of the buttons. They are usually camouflaged on photographs and in the central part of the screen. In short, it is about taking the typical web buttons to the minimum expression: text, a box without filling and some hover effect, nothing more.

How are they used?

First of all, and you may not have realized it, note that most of the ghost buttons are larger than the normal buttons that you can find elsewhere on the web page. This they allow us because they never obstruct the back of the screen.

It is a resource used mainly in landing pages, since the main objective of these pages is to capture the visitor’s attention and get a response to the call to attention that I make to the user. Its use is common on pages where large format photography or video is presented, so as not to cover it up.


Zero screen obstruction: does not obstruct the view of objects behind.
Smaller file size: Since they are only frames, their weight is much less. This facilitates the loading of the web, and the user appreciates it (especially mobile) and improves SEO
Mobile friendly: in a mobile every inch of the screen space has value, and by placing ghost buttons we take advantage of every corner
Useful: the conversion rates and A / B tests carried out show that they work very well from an aesthetic point of view, they are able to attract the attention of the visitor.
Funnel: being able to place a transparent button in a strategic place, without a size limit and allowing you to see the background, will help us to make the user trace their navigation as we intend
All-terrain: although initially they were applied mainly in webs about trends and fashion, their use has extended to all types of web design, typography or sector.
Plus: designers who use ghost buttons will have a competitive advantage over those who don’t, therefore it can be something unique to offer to your client.


Like everything in life (and more so if it comes to design), we could be facing a passing fad, and its popularity may fade to the point that you have to redesign your website.
Some are abusing it: it may not be that all layout schemes need the ghost buttons, but some developers insist on using them anyway; using them where they are needed makes the most sense.
Functionality: if you want these buttons to be a functional element in your web design, then you will need to follow the rules of keeping it clean and readable, and avoid any kind of fancy nonsense.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button