Skip to main content

How To Create Ghost Button or Hollow Button

Creating smart button for a website becomes most popular web design trend now a days. These buttons are so designed that it is referred as Ghost Button or Hollow Button because of their transparent and emptiness. Read also : How to protect your computer from wannaCry ransomware virus.

What is Ghost Button

Ghost buttons are the transparent and empty buttons as well as clickable items with no fill and a simple outline that have some basic shape form such as rectangular or square. These buttons are sometimes referred as Hollow buttons because of its emptiness. Generally these buttons are bordered by very thin line and internal section consist of plain text printed in light colour mostly black / white.

Ghost buttons are semi transparent or completely transparent asides from the outline and text and hence the name “ghost" comes. Ghost buttons are quite popular on pages that use full-screen photography and it seemed to evolve from Apple when they redesigned iOS7. Read also : How to make money online from home.

Creating Ghost Buttons

To create ghost buttons you must have knowledge of html and css. Here I will show how to create ghost buttons with css. But before we begin you might like to see the below image of some sites that uses ghost buttons.





HTML Markup

To create ghost button, here we need only anchor tag i.e, opening <a> and closing tag</a> to link text and a class within it.

<a class="ghost button" href="page url goes here"> Your text goes here </a>

Cascading Style Sheets (CSS)

There are seven different ways to style ghost buttons.
  • Basic ghost button
  • Rounded corners ghost button
  • Thick border ghost button
  • Border color fade ghost button 
  • Full color fade ghost button
  • Size transition effect ghost button
  • Semi-transparent fade ghost button

Basic Ghost Button

At first we need to create some foundational CSS codes that make anchor element i.e, <a> look like ghost element. Read also : How to setup AdSense page level ads.

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


There should be visual indication whenever a user hovers the ghost button and it can be achieved by creating 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;
}


NB : You can modify the width, padding and color according to you.

Rounded Corner Ghost Button

To create rounded corner ghost button you need to add the border-radius property in the above Basic Ghost Button CSS codes. After adding this property the Basic Ghost Button CSS codes becomes like below codes. Read also : How to make money from Flipkart.

.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;
}


Thick Border Ghost Button

Thick border ghost button can be achieved by adding font-weight property and increasing the border property from 1px to say 2px, 3px in the CSS codes

.ghost-button-thick-border {
display: inline-block;
width: 200px;
padding: 8px;

font-weight: bold;
color: #fff;
border:
1px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button-thick-border:hover,
.ghost-button-thick-border:active
background-color: #fff;
color: #000;
}


Border Color Fade Ghost Button

It is one of the most popular transition effect in most ghost buttons. Fading the border and the text color to another color can be achieved using the CSS transitionproperty. Read also : How to make money from Amazon.

.ghost-button-border-fade {
  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-fade: hover,
 .ghost-button-border-fade:active {
 border-color: #66d8ed;
color: #66d8ed;

 transition: border-color 0.3s ease-in,  color 0.3s ease-in;
}


Full Color Fade Ghost Button

It is the another popular transition effect in some ghost buttons. Here the border color, text color and background color can be faded in another color using the CSS transition property and background-color property.

.ghost-button-full-color-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;

transition: border-color 0.3s ease-out,
                    color 0.3s ease-out,
                    background-color 0.3s ease-out,
}
.ghost-button-full-color-fade: hover,
.ghost-button-full-color-fade: active {
border-color: #374f5b;
color: #fff;
background-color: #668898;

transition: border-color 0.3s ease-in,
                    color 0.3s ease-in,
                    background-color 0.3s ease-in
}


Semi Transparent Fade Ghost Button

It is one of another variant ghost buttons. To make ghost buttons are more interesting, here we allow some of the background image to show through the button when a user hovers over it and this can be achieved by using the rgba() function with 20% opacity rgba(255, 255, 255, 0.2); in the :hover and :active style rule. Since the rgba() function is not supported by all browsers thats why here we have to declare solid color as fallbacks. Read also : How to setup custom AdSense search engine.

.ghost-button-semi-transparent-fade {
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,
                     background-color 0.3s ease-out;
}
.ghost-button-semi-transparent-fade : hover
.ghost-button-semi-transparent-fade : active {
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255,
0.2);
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255,
0.2);
transition: border-color 0.3s ease-in,
background-color 0.3s ease-in;
}


Size Transition Effect Ghost Button

This type of ghost buttons can be made by expanding its size whenever a user hovers over it and we can achieve this effect in ghost buttons by increasing the width, height and line-height value in the :hover and :active style rule.

.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: 210px;
height: 35px;
line-height: 35px;
transition: width 0.1s ease-in,
                      height 0.1s ease-in,
                      line-height 0.1s ease-in;
}


Thanks for reading. Please share the post and your views on the same.


Comments

Post a Comment