Ghost buttons are very popular these days. Many websites make use of these type of stylish button to attract the visitors to click it. Many of my friends asked me about the ghost buttons and How to add ghost buttons to their websites. So, I decided to write this tutorial which also helps you alongside with my friends. So, in this tutorial, you will get an idea on how to add CSS ghost buttons to your WordPress website.
What is Ghost Button?
The transparent buttons that blend into their background and only separated by a border are called the Ghost buttons. ‘Ghost buttons‘ is a web terminology used for this kind of buttons used in websites. Below is an example for the ghost button.
Add CSS Ghost Buttons to WordPress Theme
To add the CSS Ghost button to the WordPress theme, you need to define a class of the buttons first. For this, go to the stylesheet of your theme and add the following code to it.
If you prefer to use the FTP to add the code to the Stylesheet, Go to /wp-content/themes/Your-Theme/ folder and locate the style.css file. The add the below code to the file.
If you prefer to add the code from the WordPress itself. Navigate to Appearance > Editor and select the style.css or some files which define the styles of your theme. Then, add the code below.
Note: Some themes will not allow you to edit the style.css file from the WordPress due to some security or accessibility reasons. If so, you need to follow the FTP method to access the file.
.ghost-button {
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:hover,
.ghost-button:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
Now, you defined a class .ghost-button. You can make any of your links to look like a catchy ghost button by just assigning this class to them.
For example, If you want to change the download link to a button, just switch to the Text / HTML view and assign the class to the text. Here is an example of the code.
<a href="http://example.com/downloads/" class="ghost-button">Download Now</a>
Now, you will see a catchy ghost icon set for your download link, and you can set this anywhere in your website by just assigning the class.
