How to Create CSS Ghost Buttons

A popular web design trend this year is the “ghost button”, which is simply a button with a border and a transparent background color. You can read more detailed discussions about the ghost button design trend on SitePoint and DesignModo. In this tutorial, I’ll show you how to create several styles of ghost buttons using CSS.

Examples of Ghost Buttons

Before we get started, let’s look at some real-world examples of ghost buttons: We Are Heckford MediaMonks VIZIO CrossFit Squamish Icon PR Lees Ferry The Livesey Arms dotsprint.co.uk Squares Conference Haigh & Hastings Decibel Digital

Ghost Button Design Trends

Looking at the ghost buttons above, we can see some prominent commonalities among them.

1. Photographic backgrounds: Ghost buttons look excellent on top of background photos. It allows the user to see the background image through the button, which is an interesting visual effect.
2. White is a popular ghost button color: Ghost buttons can be any color you want, and you should choose colors that fit the look-and-feel of your design project, but the overwhelming trend is to give them a white border and white text.
3. CSS transitions: We can enhance the interaction experience of our ghost buttons using subtle CSS transition effects.

Ghost Buttons Demo

I created eight variations of ghost buttons inspired by the ones I’ve seen. You can see all of them in one page: View demo

HTML

For this tutorial, I used an HTML <a> element to represent the ghost buttons.

<a class="ghost-button" href="#">Ghost button text</a>

CSS

Let’s go through the 8 ghost button variations, which I’ve labeled as:

1. Basic ghost button
2. Rounded corners
3. Simple transition effect
4. Thick border
5. Semi-transparent fade
6. Border color fade
7. Full color fade
8. Size transition effect

1. Basic Ghost Button

Here’s the CSS to make our <a> element look like a ghost button.

.ghost-button { display: inline-block; width: 200px; padding: 8px; color: #fff; border: 1px solid #fff; text-align: center; outline: none; text-decoration: none; }

Those are the foundational CSS properties that make the ghost button look the way it does. In the other variations, we just have to modify the above properties or add new properties.

There should be a visual indication whenever the user hovers or activates the ghost button. To achieve this, we’ll create style rules for the hover and active states using the :hover and :active pseudo-classes.

.ghost-button:hover, .ghost-button:active { background-color: #fff; color: #000; }

2. Rounded Corners

Some ghost buttons have rounded corners. This is easily done by adding a border-radius property.

.ghost-button-rounded-corners { display: inline-block; width: 200px; padding: 8px; color: #fff; border: 1px solid #fff; border-radius: 5px; text-align: center; outline: none; text-decoration: none; } .ghost-button-rounded-corners:hover, .ghost-button-rounded-corners:active { background-color: #fff; color: #000; }

3. Simple Transition Effect

To make the ghost button more interesting, we can apply a subtle transition effect whenever the user hovers or clicks on it. In this variation, we use the CSS transition property to fade in/fade out the border and background color of the ghost button.

.ghost-button-transition { display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none;  transition: background-color 0.2s ease-out, color 0.2s ease-out; } .ghost-button-transition:hover, .ghost-button-transition:active { background-color: #fff; color: #000; transition: background-color 0.3s ease-in, color 0.3s ease-in; }

4. Thick Border

In certain instances, you might want a thicker ghost button so that it has a heavier visual weight. All we need to do to achieve this is to increase the border-size property value from 1px to, say, 3px.

.ghost-button-thick-border { display: inline-block; width: 200px; font-weight: bold; padding: 8px; color: #fff; border: 3px solid #fff; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; } .ghost-button-thick-border:hover, .ghost-button-thick-border:active { background-color: #fff; color: #000; transition: background-color 0.3s ease-in, color 0.3s ease-in; }

5. Semi-Transparent Fade

In this ghost button variation, we allow some of the background image to show through the button when the user hovers over it. This leads to an interesting visual effect, especially when you have a good background image. We achieve this effect by using the rgba()function in the :hover and :active style rule.

The color we use for the background and border is white with 40% opacity, which is represented like so:

rgba(255, 255, 255, 0.4)

However, since the rgba()function is a new CSS feature, not all browsers will support it so we should declare solid colors using hexadecimal notation as fallbacks.

.ghost-button-semi-transparent { display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, border-color 0.2s ease-out; } .ghost-button-semi-transparent:hover, .ghost-button-semi-transparent:active { background-color: #fff; /* fallback */ background-color: rgba(255, 255, 255, 0.4); border-color: #fff; /* fallback */ border-color: rgba(255, 255, 255, 0.4); transition: background-color 0.3s ease-in, border-color 0.3s ease-in; }

6. Border Color Fade

A popular transition effect in some of the ghost buttons I have encountered is fading the border and text color to another color. This is quite easy to do with the CSS transition property.

.ghost-button-border-color { display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: border-color 0.3s ease-out, color 0.3s ease-out; } .ghost-button-border-color:hover, .ghost-button-border-color:active { color: #66d8ed; border-color: #66d8ed; transition: border-color 0.4s ease-in, color 0.4s ease-in; } 

7. Full Color Fade

For a more distinct transition effect, we can fade in another color for the border and background. Again, we use the CSS transition property, but this time we will transition the background-color property as well.

.ghost-button-full-color { display: inline-block; width: 200px; padding: 8px; color: #fff; background-color: transparent; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out; } .ghost-button-full-color:hover, .ghost-button-full-color:active { background-color: #9363c4; border-color: #9363c4; color: #fff; transition: color 0.3s ease-in, background-color 0.3s ease-in, border-color 0.3s ease-in; }

8. Size Transition Effect

Another way to animate ghost buttons is by expanding its size when the user hovers over it and then contracting it back when the user hovers out. We can accomplish this effect quite simply by adding 20px to the width, height, line-height properties when the user hovers over the button. For this transition effect, I felt that the 0.3s transition speed I’ve been using in the other variations felt too sluggish, so I lowered the value to 0.1s to make the transition faster.

.ghost-button-size-transition { display: inline-block; width: 200px; height: 25px; line-height: 25px; margin: 0 auto; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: width 0.3s ease-out, height 0.3s ease-out, line-height 0.3s ease-out; } .ghost-button-size-transition:hover, .ghost-button-size-transition:active { width: 220px; height: 45px; line-height: 45px; transition: width 0.1s ease-in, height 0.1s ease-in, line-height 0.1s ease-in; }

Summary

The ghost button design trend is currently quite popular. As you’ve seen, it’s easy to create ghost buttons using CSS. The source code of the demo page is on GitHub in case you want to review it or download it: View source on GitHub Download source on GitHub

Related Content

• Create an Animated “Call to Action” Button
• Create a CSS3 Call to Action Button
• How to Create Social Media Buttons Using CSS3