How to Add a Ghost Button to Your Posts
Published on September 3, 2024
Published on Wealthy Affiliate — a platform for building real online businesses with modern training and AI.
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:
Ready to put this into action?
Start your free journey today — no credit card required.
<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!
Share this insight
This conversation is happening inside the community.
Join free to continue it.The Internet Changed. Now It Is Time to Build Differently.
If this article resonated, the next step is learning how to apply it. Inside Wealthy Affiliate, we break this down into practical steps you can use to build a real online business.
No credit card. Instant access.