hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

How to Use Ghost Buttons Effectively

Although ghost buttons were predicted to be a web design trend for the year 2014, it is obvious that it just didn’t stop there. These days, the number of websites adapting this hollow button design is on the constant rise. When you come to think of it, there’s nothing really special about these buttons, but, since they are a practically a new concept, many website owners and designers incorporate them in their web designs.

ghost buttons

Learn how to use ghost buttons effectively

Understanding the Ghost Buttons

Transparent and shadowy elements are not new in the world of web designing as these started at almost the same time when the flat style design was embraced. However, because they are simple, and many web designers have acknowledged the importance of minimalist designs in strengthening web page designs, it is safe to say that ghost buttons will maintain its popularity as an inclusion in many design pages. Additionally, understanding the anatomy of these ghost buttons are not above your head:
• thin button frame or outline
• transparent button background
• light font for call-to-action

Trendy yet Simple

Ghost buttons, without question, are trendy. Nonetheless, this doesn’t mean that they are complex in terms of design. In fact, it can be said that their popularity can even be attributed to the simplicity that makes them up. Additionally, this simplicity of design is celebrated even by novices in the field of web designing because the ease they provide when they are made. If you try to compare the ghost button designs by pros and by the new web designers, you can never tell the difference. However, this simplicity can be both a blessing and a curse. Okay, it’s a given that they are easy to design. Nonetheless, this also makes it easier for designers to place these buttons anywhere in the design. If you are a web page designer, you need to have a clear understanding of how ghost buttons work; they are more efficient in specific areas of the design and if they are used for the right purpose. Therefore, bear in mind to never abuse the ease that comes with creating these ghost buttons.

Find the Best Location for the “Ghosts”


The middle of the homepage is the perfect place for a ghost buttons

One of the best locations where you can place your ghost buttons is the home page, at the center of the home page to be more specific.” Why”, you may ask. This is because this spot will give the ghost buttons a high level of visibility which can impact the number of visitors who will actually click them. You need to remember that, on the whole, the home page is the center of attention of many website users. This is where they gaze for a while before finally browsing the rest of the website. Take a look at the following website and notice how your eyes move.

You can see in this website that the ghost button is right at the center of the web page. Doesn’t it catch your attention immediately as if calling you to click on it? It surely does, right? But, of course, this particular ghost button is way bigger than other ghost buttons of other websites.

Calls to Action

As already mentioned, one of the primary advantages of ghost buttons is that they call on the visitors to your website to act. Generally, they have that 3D effect, hence, they are much better than the usual CTA buttons. While it is true, though, that this innovation in buttons may not have a significant impact on your sales (if you are a selling website), ghost buttons will certainly change your users’ perception of your website.

Navigation Menu

Apart from being a great call-to-action button, ghost buttons are also ideal for navigational menu and tabs, too. No matter how simple your web page design is, if you have functional and highly usable buttons, these may be enough to satisfy your web page visitors. Take a look at the placement of the ghost button of Visage.

The Awesome Functionality Ghost Buttons

When a new design trend emerges, as a designer, you may not stop thinking how you can use it in your web design, isn’t it? The same thing can be said about with ghost buttons. However, these buttons are the most ideal for the following websites:

I. Business Website Designs

Beyond any shadow of a doubt, ghost buttons are the most ideal for business websites. While they are the most popular type, unfortunately, they are also the most restrained. Generally speaking, business websites steer clear of trendy features and common design techniques, but some just can’t resist using ghost buttons. Here are some of the business websites that use ghost buttons.

How Ghost Buttons can Affect your Business Website:


Price Ink’s ghost button changes color

1. Your business website can look more trendy and creative at the same time if you use a ghost button that changes color when the user hovers over it. Visit the website of the picture above to see how its ghost button works.


Ghost buttons complete the professional look of a website

2. Ghost buttons can make it more professional and unobtrusive, especially if you use it as a CTA.

3. You can engage your users to sign up for a product beta, much more if you place it above the fold section. This will enable the visitors to take notice of its presence.

II. Ghost Buttons for Creative Studios Websites.

If there is one type of website that almost always adapts the trend, it’s got to be the creative studio websites. Does this mean that they have embraced the ghost button trend, too? Take a look at the following websites:


Black and white work well with ghosts

1.Create Conquer. This web site makes use of black and white colors, and its ghost button has the same colors, too. Some of the borders and the text of the buttons are black, some are white. It all depends on the background that they have.


Ghost buttons add to the elegance of this page

2.Audrey Azoura. This furniture and interior design website just oozes with elegance. Apart from embracing the image-focused design, which is also the current trend, this website also makes use of ghost buttons with a color palette that compliments its theme.

III. Ghost Buttons for Software Websites

Many software companies have also incorporated the use of the ghost button to their websites. Many of these websites can give you a hint on how you can use the creative buttons creatively. Some of these websites come with only one ghost button, while others use colorful buttons and conventional shades.


Traditional still works

1. Philosophie. This site makes use of the traditional black and white colors blended with the tone of pink. The designs of the buttons are dependent on the color used as their background.


Using empty buttons work amazingly

2. ShopMyApp. This website makes use of empty buttons that have a white outline; they turn into green once you hover over them. Additionally, the menu tabs make use of ghost button as well. Cool!

IV. Ghost Buttons for Education Website Designs

Many educational websites have, likewise, adapted the ghost button trend. Well, this is not really surprising as this type of website aims at attracting the youth.


Ghost buttons can be placed in other parts of your website, too

1. Vantage Points. Apart from featuring a video on its landing page, this website also makes use of a ghost button over it. Ghost buttons can also be found in the other pages of the website.


You can try different colors for your ghost button

2. Campus Bubble. This website makes use of different colors and so does its ghost buttons. Specifically, the ghost buttons make use of green, blue, and orange colors. Without question, the buttons make the website more engaging despite being simple.

V. Ghost Buttons and Ecommerce Websites

More often than not, ecommerce websites are content rich. Since ghost buttons are simple and thin, they are most suited for these websites.


You can also use the double outline for your ghosts

1. Industry Standard. However, Industry Standard’s double outline ghost button, without question, looks awesome on its website design. Double borders simply makes the button more visible.


An image-focused website can also use ghosts

2. 20 Jeans. This online business website is another validation that it is perfectly okay for an image-focused website to employ ghost buttons. The models in the photo are situated at the right, which makes the black text on top of the white background on the opposite side attract attention. It would have been better, though, if the color of the text was different from that of the ghost button. Its bold text works as if manipulating the eyes to gaze to the direction of the ghost button. Additionally, it only has one ghost button on the homepage above the fold, making it easy for the CTA to be noticed. Furthermore, the CTA makes use of the word “shop”, making it clear to the users what’s going to happen once they click the button.

Without Question, Ghost Buttons are Ideal for CTAs

With the above-cited examples, it should be clear to you by now that that ghost buttons are ideal for almost every type of website. However, it is also obvious that many designers of the mentioned websites made of the ghost buttons for the call-to-action purpose. Who knows how the ghost buttons they have made use of work on their advantage in terms of the actions that they desire? If you are into business, maybe these ghost buttons can help you rake in more sales. Again, who knows? However, always remember that, when adding buttons to a website, there are several things that you need to take into consideration if you want to improve the conversion rates that you’ll get. It is normal to see a bold button over a simple background or a button whose color contrasts to that of the background where they are placed. This has long been a proven strategy to gather high CTR.

Ideal for Image-Focused Design Website

While it is true that ghost buttons can be employed in many different types of websites, in terms of webpage design, they are most ideal for those that make use of the image-focused design. How many website examples given above made use of the image-focused design with ghost buttons? Several of them! After all, with the simplicity of ghost buttons, they cannot disrupt the aesthetic value that the large images provide, as compared to the traditional buttons do. Additionally, this type of button is also ideal for one-page sites.

Ghost Buttons and your iPhone

Have you ever noticed the round buttons on your iPhone that runs on iOS 7? Well, if you haven’t, it’s time for you to realize that those are actually ghost buttons. Experts have said that the emergence of ghost buttons can be attributed to the fact that people are more passionate about making full screen backgrounds that have 50 % opacity. These backgrounds also make the interface form over them. It is an opportunity for the users to divide their attention to the background image, the reflecting styles, and the ghost elements, which may not be that visible but are, definitely, still visible.

Elements of the Ghost Button Design

As already mentioned, the most basic elements of a ghost button are a transparent outline, button background, and a light font for CTAs. However, these are not just the elements that you need to consider when your incorporate ghost buttons into your web design. You should also make sure that your ghost button is:
• contains simple and readable text
• larger than the conventional buttons
• placed in prominent areas of the page
• placed alone or in a group
• used with flat or almost flat designs
• makes use of geometric icons inside the borders sparingly and if needed

The Advantages of Ghost Buttons

Should you incorporate ghost buttons in your design? Here are some of the good points about this trend that may make you decide to go for it:

• Undeniably, ghost buttons look and feel clean. The simplicity of the buttons allow the main layout of your page to standout.
• Since ghost buttons are transparent, they can go with almost design that you can think of. This transparence enable them to adapt to the designs where they are superimposed.
• Ghost buttons are a continuation of the flat design. The only way for design trends to maintain their popularity is to continue the change as they adapt the new concepts.
• Ghost buttons can deliver an element of surprise as they are different from what many users have been accustomed to.
• Ghost buttons provide a great level of ease to those who will create and design them as they are meant to be simple. If you are a designer, make sure to make them subtle and steer clear from anything that may make them flashy.
• Ghost buttons have a way of calling people to act without being obtrusive. You may have already encountered many websites that feature ghost buttons that are large or larger than the other elements on the screen. Because they can be made large without affecting the other elements, they can easily attract users to perform the action that the buttons tell them to do. Now, talk about an effective interface.
• The transparent and linear design of ghost buttons gives the designer a subtle freedom as it enables the visual weight on the design to lighten.
• Ghost buttons make a web design sophisticated, no matter how simple the overall design may be, much more if the designer knows how to make use of the right color combination and where to place the buttons.

The Disadvantages of Ghost Buttons

• While it is true that ghost buttons have a lot of advantages, there are some disadvantages as well. Hence, before you start working on any design, make sure first to analyze if a trend is suitable. Here are some of the disadvantages that come with ghost buttons:
• Ghost buttons may be placed in the part of the design that can make it difficult for non-savvy users to notice them. In fact, there are people who even have difficulty identifying the normal buttons and don’t know how to use them. How much more with the non-traditional buttons?
• Using ghost buttons over images that have varying or contrasting colors can be a bit tricky. You may have a hard time figuring out how to play with colors that can still make the ghost buttons noticeable despite the background where they are placed. More often than not, ghost buttons are either black or white. However, you may have difficulty using these colors if they are to be placed over an image or background that makes use of the same shades. You have to remember that the efficacy of ghost buttons rely much on where they are placed and how visible they are, despite their transparence.
• There are times when ghost buttons can overpower the image that they are paired with.
• While it is here that ghost buttons are simple, the truth of the matter is that they are more complex than “click here”. Since the buttons, more often than not, are small, you need to be very careful in choosing the text that you will use so that it can call a user to act. Additionally, the text has to jibe with the design.
• Ghost buttons can sometime lead to legibility problems, much more if they are placed over photographs or colorful backgrounds.
• There is a tendency for some designers to overuse ghost buttons. While it is true that ghost buttons are trendy, always make sure that you know how to limit using them. Use them for a purpose and not just for the sake of jumping at the bandwagon.

Where did the Ghosts come From?

No one is really certain how ghost buttons came to existence. Design experts can only suspect that they are a result of the combination of different factors that have prompted them to exist and be embraced by many websites. As for its name, is believed to have been coined by Tumblr.
Here are some of the different contributing factors that may have given inspiration to the birth of ghost buttons:

1. The HUD

HUDs (head-up displays) have been in existence from the 1960s and were primarily used in military aircraft. However, it was only in the past couple of years when these became a part of the popular culture and have been used in movies, video games, and car dashboards. Since the data projected by HUD is seen on top of your viewpoint, it is important that this data has to be presented in a basically lightweight and transparent style so that the viewpoint will not be obscured. Sure, these HUDs are not buttons, but take notice that the elements of the interface are clear and their text-based units are bordered by thin lines. When it comes to introducing the HUDs to the general public, there is no denying that Hollywood films such as Ironman, Ender’s Game, and the Star Trek reboot have provided inspirations to the emergence of ghost buttons.

2. IOS 7

When Apple’s iOS 7 was introduced to the market, users were not as ecstatic about its interface filled with minimal buttons and icons that were bordered by grey or blue lines. However, it is widely believed that these contributed to the eventual emergence of ghost buttons.

3. Nexus 7

Eventually, Google also tapped the use of the ghost trend. Since 2013, it has also used the ghosts in their Nexus 7 website. It made use of a transparent button bordered by a white line, providing a good contrast to its background.

4. Bootstrap

Another contributor to the popularity of the ghost buttons is Bootstrap. It was in August 2013 when Bootstrap 3 was introduced to the market, and it was in its homepage where what seems to be a prototype of the ghost button was seen. Although it was not necessarily transparent, it had a monochromatic background and very simple characteristics. Many people started using what Bootstrap has started as Bootstrap itself is considered an efficient way to develop a website. As a result, more and more websites were developed with the inclination to flat designs and minimal buttons.


In conclusion, beyond the shadow of doubt, ghost buttons can really be remarkable if you know how to apply them correctly. The examples given above demonstrate that a good background is important for the visibility of the ghost buttons. It is also important to use colors that will make these buttons more noticeable. The more simple and basic the designs are, the more abridged they must be.

Article source:


Submit a Review

If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.