Ghost buttons are very popular these days. Many websites make use of these types of stylish buttons to attract visitors to click them. Many of my friends asked me about ghost buttons and how to add ghost buttons to their websites. So, I decided to write this tutorial which also helps you alongside my friends. So, in this tutorial, you will get an idea of how to add CSS ghost buttons to your WordPress website. Buckle up and let’s dive into the details.
What is a Ghost Button?
The transparent buttons that blend into their background and are only separated by a border are called the Ghost buttons. ‘Ghost buttons‘ is a web terminology used for this kind of button used in websites. Below is an example of the ghost button.
Reasons to add a CSS Ghost Button
- They look pretty cool. A bit different from those boring, standard buttons.
- Ghost buttons go well with the background images.
- They are very lightweight and can be placed almost anywhere.
- They might improve your click-through-rate purely because they look clickable.
How to add CSS Ghost Buttons to WordPress Theme
There are many ways you can add a ghost button to your website. Some of them are given below –
Method 1. By defining a class for the ghost button
To add the CSS Ghost button to the WordPress theme, you need to define a class for 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. Then add the below code to the file.
If you prefer to add the code from WordPress itself. Navigate to Appearance > Theme 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 WordPress due to some security or accessibility reasons. If so, you need to follow the FTP method to access the file. Or you can also check our article on enabling/disabling the theme file editor from the wp-admin area.
.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 on your website by just assigning the class.
Method 2. Ghost Buttons in WordPress page builders
Nowadays, most users are using a certain page builder to easily create their WordPress pages. WordPress itself is becoming a block editor with the latest updates. So if you want to add a CSS cost button to your WordPress pages while using a page builder, you do not have to use the above code. Most page builders come with a drag-and-drop interface, which you can simply use to drag a button element, click on it, and then style it according to your requirements.
Method 3. Using a button plugin
There are many Button Plugins available, all across the WordPress plugin repository. You can use any one of them to create a ghost button based on your requirements. A good example of such a plugin is the Button plugin. Simply create a button and use it anywhere you like.