Menu

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:

Ghost button example: We Are HeckfordWe Are Heckford

Ghost button example: MediaMonksMediaMonks

Ghost button example: VIZIOVIZIO

Ghost button example: CrossFit SquamishCrossFit Squamish

Ghost button example: Icon PRIcon PR

Ghost button example: Lees FerryLees Ferry

Ghost button example: The Livesey ArmsThe Livesey Arms

Ghost button example: dotsprint.co.ukdotsprint.co.uk

Ghost button example: Squares ConferenceSquares Conference

Ghost button example: Haigh & HastingsHaigh & Hastings

Ghost button example: Decibel DigitalDecibel 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

Ghost Buttons 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

About the Author

Jacob Gube is the founder of Six Revisions. He’s also a front-end web developer. Follow him on Twitter @sixrevisions.

This was published on Nov 17, 2014

4 Comments

Hey Jacob – nice tutorial. Is there a way to fade different text and color in at the same time? For example full color fade text says Buy Now on hover changes to say Same Day Shipping.

Jacob Gube Jan 01 2015

@Kurt: Yes, what you want to achieve is possible. The easy route is JavaScript (modify the DOM during the hover event), but it’s not the most performant or the most ideal solution, since you need to run a script to achieve it.

You can use the CSS to achieve what you’d like to do, which to me is the best option. Read this discussion on StackOverflow – the thread is about a similar situation.

Beautiful, thank you.

mazhar abbas Apr 13 2015

Amazinggg. So beautiful!

This comment section is closed. Please contact us if you have important new information about this post.

Partners