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. 

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.

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.

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

  .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 transition property.

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

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

Big on Hosting. Unlimited Space & Unlimited Bandwidth

Comments

Post a Comment

Popular posts from this blog

How To Change Default File Download Path in UC Browser

All of us known that UC browser is the most popular, fast and less data consuming mobile browser for android devices. Many of us use UC browser on daily basis on our smart phones. By default UC browser has download path to internal memory device which is /storage/sdcard0/download. sdcard0 is the built in memory or internal memory of your device. Read also : How to fix HTTP and HTTPS Mixed Content Errors.


Do you know that this default download path can be changed? Since, internal memory is fixed, and once you exceed this value you can't download more. You need to move some data from mobile memory to the external memory which is sdcard1. If you change this default path to external memory card (sdcard1), you can download more data directly to your desired directory. Read also : How to Setup AdSense Page Level Ads and Fix Script Error.

Here, I will show you, how to change this default download path from internal memory card sdcard0 to external memory card sdcard1. To do so you need to…

Calculation of Total Marks, Percentage, Division, Remarks, Maximum & Minimum Number of Students in MS Excel

In this post, I will help you to learn how to calculate total marks, percentage, division, maximum number, minimum number and remarks of students of a class very fast. At first you need to look over the above image very carefully. The above image shows the marks obtained by six students of a class.


Formula to calculate Total Marks of all students within seconds 

First you need to find out the Total Mark of a single student who is on the top of the list i.e, Mani. To calculate Total Mark of Mani, click on the Total Mark cell address of Mani i.e, H6 and then type the formula =sum(1st subject's cell address i.e, b6:last subject's cell address i.e, g6) and then press Enter on the keyboard or click anywhere on the worksheet. Here b6 and g6 are cell address of 1st subject (English) and last subject (Biology) of that student. Read also : How to Enable HTTPS for Blogger Blog.

After getting results, click on the resultant cell address of Total Mark of the 1st student i.e., Mani an…

How To Rename A WhatsApp Group

We all know that WhatsApp is the most popular messaging service for Android, BlackBerry, iPhone and for other platforms. In this post, I will show you how to rename an existing WhatsApp group. To rename an existing WhatsApp group your smartphone must have internet connection. After that you need to follow the below steps. Read also : How to track lost/stolen mobile phone and erase data remotely.


Step 1. Open WhatsApp application on your smartphone.

Step 2. After that you need to click CHATS tab and click on your group name.

Step 3. Once you click on your group name, you will able to see chat details. Now you need to click vertical dots located extremely top right corner and then click Group info. Read also : How to setup AdSense page level ads.

Step 4. Now you can easily rename your group. To rename the group just click Edit icon and then type the desired group name and click OK.

In this way you can rename a WhatsApp group.


Thanks for reading the post. Let me know have you ever changed y…

Change UC Browser Default Homepage in Android Phones

We all know that Android OS operated Smartphones and Tablets are great for web browsing. Like other browsers, uc browser has a default search engine Yahoo is set for web search. UC browser provides different kind of search facilities under 5 different categories namely Web, Video, Shop, Image and APP.


In this post, I will show you how to change the default search engines of uc browser in Android devices for their 5 different categories. To do so you just need to follow the below steps. Read also : How to Enable HTTPS for Blogger Blog.

Change Default Homepage for UC Web search

Step 1. At first you need to open UC browser
Step 2. After that click Search. Follow the below image.
Step 3.Once you click Search, you will able to see the default search engine's icon for Web search like y for Yahoo, g for Google. Now you need to click that search icon. Follow the below image. Read also : How to change UC browser default download path.

Step 4. Once you click the search icon, you will able t…

How To Lock / Track Lost Smartphone Remotely & Erase All Data

Are you worried about data from your lost / stolen android phone? Now you can lock your lost / stolen android phone remotely. You can erase all data from your lost android phone remotely. Now Google's new service tool (Android Device Manager) helps android owners to track / lock lost android phone remotely. In this post, I will share some tips so that you can prevent misuse of your lost mobile data. Read also : How to make your blog push notification ready.


Whats is Android Device Manager

Android Device Manager (ADM) is a tool that locates lost or stolen android devices such as android mobile phones and tablets. ADM also helps owners to Ring, Lock or Erase all the data from the phone remotely. If somehow your android mobile phone / tablet has been lost or stolen use ADM immediately to find location or lock the phone with a password and erase everything from your mobile phone. Read also : How to setup AdSense page level ads.

How to Setup Android Device Manager

Before using ADM, you …

How to Know Who Has Read Your Whatsapp Group Message on Android

I have recently published a post regarding WhatsApp end-to-end encryption and how to stop media auto download and more. The latest WhatsApp has many new features including double blue tick, bold, italic, and understrike your message, sending pdf file, share photos from cloud drive, auto shorted links, clear chat, zoom, pop-out, edit your videos, data saving mode and many more.


This is just a bit tricky to find out who has read your messages in a group. The steps are slightly different for mobile phones and tablets. Read also : How to Fix HTTP and HTTPS Mixed Content Errors

Steps For Mobile Phones

Step 1. At first open WhatsApp application.

Step 2. Now tap on any group name.

Step 3. In a group, tap and hold on a message that you have sent. Once you do that, a popup menu will appear at the top of the screen. No matter it could be a text message or an image, you will get the same results both for text message and an image. Read also : How to setup AdSense matched content ad unit and fix scr…

How To Customize Gmail Theme

We all know, Gmail is the most used secure webmail service as well as via POP3 or IMAP4 protocols worldwide which was launched by the search engine giant Google in April 1, 2004. Gmail became available to the general public worldwide on February 7, 2007.

As of June 2012, Gmail is the most widely used web-based email provider with over 425 million active users worldwide. Gmail is also available in 71 languages. Gmail became the first app on the Google Play Store in May 2014 and just after that almost one billion install on Android devices.

Gmail has many features like Tabbed Inbox, Storage, Spam Filters, Gmail Search, Voice Chat, Gmail Labs, Gmail Labels, Gmail Themes, Keyboard Shortcuts, Money Transfer and Payment Options. Although Gmail has many features but many people do not use them.

In this post, I will show you one interesting feature of Gmail which almost none can use it. I know many Gmail users change their Gmail theme. But I can promise very less can set custom image as Gma…