Ghost Buttons – A Current and Popular Trend in Website Design
Ghost buttons, or empty buttons, are a trend that have really come into being through necessity – the use of large background images requires information elements that don’t obscure large areas of the image, and ghost buttons with their no fill, and usually thin border and small text fit the bill perfectly.
Of course, designers being such creative animals, we are seeing different types of ghost buttons and varying layouts and uses for them. Here is a selection of ghost buttons in use, and I have tried to select as many different types as possible to show the creativity of the designers.
The Offshore Partners
The Offshore Parners use a very dark monochrome full screen image on their landing page with 3 ghost buttons – a link to their partner site M Restart, the ‘Let’s Go’ call to action button , and the hamburger menu button is enclosed in a ghost button. The first two turn white with gray text when you hover the cursor over them, the menu button becomes filled with black with white text. There are more ghost buttons used throughout the site.
Visage use ghost buttons very creatively throughout their site. The ‘Contact Us’ ghost button turns blue and is in the same style as the ‘Request Private Beta Access’ button on mouseover. It also expands a little. The ‘Beta Login’ ghost button at the top of the page remains as a ghost button on mouseover, but the text and outline turns blue. The ‘Blog’ link becomes a blue ghost button on mouseover. There are a couple more ghost buttons on the site – one black and white and one orange. Also notice that the headline text on the home page changes. The second and third line rotate through some different text and on occasion, a fourth line appears.
Before you get too excited or scared by this app, it is actually a very elaborate April Fool’s joke. It nicely demonstrates the use of ghost buttons on colored transparencies over a full screen background image. It uses an orangey-pink color if you choose ‘Female’ as your gender, and a powder blue if you choose ‘Male’. If you click the ‘Continue’ button, there is some ticker-tape text about what the app will do to learn about you. Finally you are taken to a sign-up page where the header has changed from ‘Alice ai’ to ‘April Fools’. They then state: “Want us to actually build Alice? If we get enough sign ups, we just might do it.” – Sounds a bit Big Brother-ish to me!! Notice on this site also, the social media buttons are in the ghost style – they fill with a pale gray on mouseover.
This agency use this combination of green, blue and pink very subtly throughout their site. Notice the hamburger menu button also uses that color combination.
Here is a rather different approach to ghost buttons. When you hover over the button, a label pops up above it. They also use what might be called ‘ghost icons’. Line icons that spin round and expand a little on mouseover.
In my personal opinion, this is a beautifully designed site that uses many of the current trends. On the landing page you encounter a ghost button that fills with white with gray text on mouseover, there is a red transparency on mouseover in the center column, and more ghost buttons and different colored transparencies further down the page. It is presented as a minimal design with a basic black and white theme.
Here is a nice example of a ghost button using a complementary color to the background. On mouseover, the button fills with the border orange color and the text turns into the same color as the background, thereby appearing empty.
This site uses a full screen video on the landing page. The ‘Play’ button is a ghost button that does not fill with color on mouseover, the circle simple expands a little. The reservation button on the right and the hamburger menu button on the left are thin outline icons that follow the theme of the play button.
Toga have used yet another approach to the implementation of ghost buttons. The large box, divided into sections actually contains 3 ghost buttons. The ‘View Property Detail’ text turns a very slightly darker shade on mouseover, indicating that it is a link, and the forward and back arrows transpose, so the box is filled with white and the arrow is empty. In fact, the View Property Detail indicating it is a link is really unnecessary as the whole image is a link to the property details.
This web design agency use a ghost button on an ever changing gradient background. It demonstrates how the ghost button remains clearly visible no matter what the color is underneath it.
This Startup site has 2 buttons on the landing page. As you hover the cursor over each, they change to match the other – so the filled one becomes empty, and the empty one becomes filled.
Here we see the use of blurred background images and pattern overlays to create a somewhat washed out effect on the images. A small ‘Next’ button in the ghost style turns a light beige color on mouseover. This company has also put their name into a ghost-style empty box. The whole site has a very subtle look with a minimal feel.
Inner Ear Records
This independent record label do not worry about obscuring the background image as they place a fairly large white box in the center of thei vertically scrolling slide show. However, they do use a ghost button within that box for the call to action button ‘View’, which fills with black and has white text on mouseover.
This Italian site also uses a filled box, but it obscures much less of the hero area image than the above example. Moving the cursor over a ghost button produces a drop-down category list.
Here is another example of a ghost button on a colored transparency. This design uses shades of red, black and white throughout the site, with only their email address displayed in a different color – blue.
This is an extremely minimal design, using mainly black and white with a couple of touches of blue text. There are 3 ghost buttons on the home page, and they form a triangle in their placement. The menu button top left, Sign Up button top right and Request Invite button in the center. The home page has a rather opaque transparency over a black and white full screen image.
Here, a black transparency helps the headline text, menu and call to action buttons stand out on the background video. When the video finishes, you are faced with a full screen image of a man staring at you! The 2 ghost buttons on this page are rounded rectangles using different amounts of corner radius. When you hover the cursor over the ‘Check the Goods’ button, the transparency over the image turns beige and more opaque, and the button is filled with gray.
Reebok: Be More Human
The ghost button used on this design to move down the page is presented in a stylized speech bubble. When you hover the cursor over the button, all lines except the bottom one disappear. There are more ghost buttons as you scroll down the site.
This is the French version of Volkswagen’s promotional sites for their electric cars. They use two ghost buttons in rounded boxes side by side on their home page, and the box fills with white and text become blue on mouseover.
This is a beautiful example of ghost buttons in use on a patterned transparency over a full screen video.
Here are a couple of tutorials showing how to code ghost buttons in CSS3.
How To Make a Ghost Button in CSS3
This tutorial walks you through how to style a ghost button in CSS3, giving explanations every step of the way. It also includes the full CSS styling if you wish to copy and paste it.
How To Create CSS Ghost Buttons
This article starts off with a showcase of ghost buttons in use (all different examples to those featured in this article), and concludes with a tutorial giving the CSS and HTML required for 8 different styles of ghost buttons.
So as you can see, a little creativity mixed with current trends can produce something a bit different, which makes it a touch more interesting. Have you come up with any different uses for or styles of ghost buttons? Please share your links and comments with us in the section below.