How to Add Ghost Buttons in Your WordPress Theme Using CSS

April 8th, 2017 | by Ravi Chahar || 2 Comments |

In this new era of web designing, people are more attracted to the ghost CSS buttons. What does really a ghost CSS button?

When a button has the transparent background with only a border. You can only know about those buttons through their borders and the text. 

Do you want to add ghost buttons in your WordPress theme? In many web designing projects, the client may need to have some ghost CSS buttons.

In this tutorial, you will learn the easiest way.

Steps Required to Create The Ghost Buttons

As you know, to create a button, first you need to have the HTML. For a link, the simple HTML is required.

Let me show you an example.

In place of the URL, you can add the URL from you want your visitors to redirect. You can create a download button.

Though you can add a download button in WordPress using any plugin but there is no specific plugin for adding a ghost CSS button.

Now, you need to add the CSS to create a button.

Whether you add the CSS code in your parent theme or your can create a child theme. You can access the CSS file either from the cPanel of your web hosting account or directly from the WordPress editor panel.

Go to Appearance>>Editor>>style.css file.

If you have noticed, a class is given to the link which is required to target.

Here is the code.

Just save the file and you will see a ghost CSS download button. You can change the color of the button while hovering according to the lay0ut of your rest of the theme.

And even the size of the button can be changed. Just change the padding and width.

If you’re good with CSS, you can easily modify this code else copy and paste it. You can use the same CSS everywhere in your theme.

Make sure the class mentioned in the link is the same. You can give your own class but make sure it doesn’t conflict with any other element.

I hope you can easily add ghost buttons in your WordPress theme.

Though for the beginners, it may seem to be a little bit of techie but when you come across the basic CSS, you wouldn’t feel like that.

To add ghost buttons in your WordPress theme, it’s always recommended to test on your local server. A web designer always looks for the safest way to make any change.

If you still face any problem, feel free to drop a comment.

You can also connect with us on LinkedIn, Twitter, and Facebook.