How to Create Ghost Buttons With CSS

One of the most popular web design trend this year is the "ghost button", which is simply created as a basic, flat shape and clickable items with no fill and a simple outline. It is completely (or almost completely transparent) asides from the outline and text. (Hence the name “ghost".)
This button are quite popular on pages that use full-screen photography, one-page sites and those with minimalist or almost-flat design schemes, because this simple style of button is thought to not intrude into the image as much as a more traditional button.

The ghost button seemed to evolve from Apple when they redesigned iOS 7. Many, if not all the UI elements are what we would call a ghost button.


Creating Ghost Buttons

In today's post, you'll learn how to create ghost buttons with CSS, but before getting started, you might like to see some sites that make use ghost buttons:


Bilder

Exposure

Alice

Audrey azoura

Visage

Also, I have created some great live examples of ghost buttons all in one page.

The HTML Markup

Here, we only need a line of code with the link <a>...</a> opening and closing tag, and a class attached to it:

<a class="ghost-button" href="#">Text goes here</a>

The CSS Markup

We will be showcasing 7 different ways of styling ghost buttons, which include:

• Basic ghost button
• Rounded corners
• Thick border
• Border color fade
• Full color fade
• Semi-transparent fade
• Size transition effect

Basic ghost button

This is just the basic usage of the ghost button, others include some properties that makes it look more captivating.

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

Rounded corners

You might have seen some ghost buttons with rounded corners, the is done by adding the border-radius property.

.gb-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;
}
.gb-rounded-corners:hover,
.gb-rounded-corners:active {
  background-color: #fff;
  color: #000;
}

Thick border

While there are ghost buttons with rounded corners and thin outline, I have seen some great live examples of ghost buttons with thick border. It can be achieved by increasing the value of the border property from 1. Here we use 3.

.gb-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;
}
.gb-thick-border:hover,
.gb-thick-border:active {
  background-color: #fff;
  color: #000;
}

Border color fade

This effect happens to be the most popular transition effect in most ghost button use cases. Only the border and the text color will be altered, and with the CSS transition effect, we can make it fade smoothly.

.gb-border-fade {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #ffffff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.gb-border-fade:hover,
.gb-border-fade:active {
  color: #66d8ed;
  border-color: #66d8ed;
}

Full color fade

We can fade in another color for the border, background and text color. Also, we use the CSS transition property to apply a smooth fading effect to each element.

.gb-full-fade {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.gb-full-fade:hover,
.gb-full-fade:active {
  background-color: #668898;
  border-color: #374f5b;
  color: #fff;
}

Semi-transparent fade

In this case, we allow some of the background image to show through the button when users hovers or activate it. This is easily achieved by using the rgba() function as the color value with 10% opacity (rgba(255, 255, 255, 0.1)) under the :hover and :active style rule.

.gb-semi-transparent {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.gb-semi-transparent:hover,
.gb-semi-transparent:active {
  background-color: #fff; /* fallback */
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #fff; /* fallback */
  border-color: rgba(255, 255, 255, 0.1);
}

However, since rgba() function is not supported by all browsers, so we have to declare solid color as fallbacks.


Size transition effect

This is a not-so-popular approach, but it can add that unique look and feel to your entire project. Animating ghost button by expanding its size (width precisely) when users hover it. It can be accomplished by increasing the width value under the :hover and :active style rule. Then using the transition property to unsure a smooth change in the size.

.gb-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;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.gb-size-transition:hover,
.gb-size-transition:active {
  width: 220px;
}

Wrapping up

Ghost buttons can be good for design and for sales (effective CTA). It seem that flat design isn’t going away any time soon, and definitely, I would recommend using this design element. But make sure this design style really works for your project before opting in. Also, I will like to know your take on ghost buttons in the comment section.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz