How to Add a Ghost Button to Your Posts

byEricCantu

15.5K followers

1 year ago

It's time for your daily dose of Wordpress Wisdom! In today's tutorial I'll be showing you how to add a ghost button to your posts that only reveals itself when it's hovered over! Check out the video and I'll show you how!

Here's the CSS code you'll need to paste into the Additional CSS tab of your Customizer:

.button.ghost, .button.ghost:visited {     
    background: transparent;     
    border: 2px solid #FFF; 
} 
.button.ghost:hover, 
.button.ghost:active {     
    background: #FFFFFF;     
    color: #222222;     
    border: 2px solid transparent; 
}

And here's the HTML code you'll copy into your post:

<a class="button ghost" href="URL FOR YOUR BUTTON">Your button text</a>

As always, feel free to share this video to anyone needing help with this. If you have any Wordpress related questions that you'd like to see me create a tutorial for send me a private message or leave me a message on my profile.

If you want to check out all my Wordpress Wisdom tutorials feel free to head over to my blog.

Be productive!
Get your hands dirty!
Create that content!
Become the master of Wordpress you know you can be!