In this tutorial, I’m going to show you how to create ghost buttons to add to your WordPress website using either the Thrive Architect plugin or the default WP post/page editor.
I’ve been an avid fan and user of the Thrive Content Builder plugin for WordPress since 2015, and now that it’s been completely replaced by Thrive Architect, a lot of things have changed.
When I originally wrote this tutorial, the original Thrive Content Builder plugin didn’t give you the option to add “ghost buttons”. However, the new Thrive Architect plugin does.
I use Thrive Architect for almost all of my landing page design projects, both for personal use and for my clients too, and I love it.
If you’d like to check out my full review of Thrive Architect, click here.
So – since you can now just manually drag and drop ghost buttons into your Thrive Architect landing page designs, you don’t really need to learn how to create them manually using HTML and CSS, right?
No, of course not, however, if you want to add them to your normal blog posts or static pages without using the Thrive Architect plugin, here’s how to do it.
To put it simply, a ghost button is a transparent call-to-action website button that often has a solid colored border around it.
A little bit like the ones shown below that I created for my Thrive landing homepage templates library.
Ghost buttons are very stylish, modern looking, and can make any webpage look clean, minimal and professional.
However, there are a few things you need to keep in mind when creating or using these style of buttons on your website.
One common problem of using ghost buttons is that sometimes they can appear completely invisible on a webpage. That could spell disaster for your conversion rates. Check out this post to learn how and why.
The key thing to remember when using ghost buttons in your web pages is to make them clear and visible for your site users to see, and not hidden or camouflaged against the background content of your website or web page. See image below for example.
Right, let’s get cracking, shall we?
First, you’ll need to create a button using good old custom HTML.
To save you a ton of time, I’ve already created the code for you to use. Here it is below –
<div align="center"><a href="http://www.some-sample-url.com" target="_blank" button="" type="button" class="btn1">Example Button</a></div>
All you need to do to make his code unique to your website or conversion goal is to change the target URL path and the CTA message. Those are marked in red, by the way.
So, to create a ghost button in your blog post or static page in WordPress, for instance, simply add the HTML code above using Text editing mode. Paste it anywhere you want the button to appear in your content.
When you go back to Visual editing mode, your button should look like a simple hypertext-link. See below.
If you want to add the HTML code above to a Thrive Architect landing page, simply drag a Custom HTML element into your page and then add the code to the element itself. See below.
Don’t forget to change the target URL path to whatever URL you want this button to lead to. Also, change the Call To Action text to whatever you want as well.
Once again, these are clearly marked in red in the HTML code above.
Once you’re done, simply hit Save.
If you’re using Thrive Architect, what you should see at this stage is a simple link with an underline like the one below.
Now let’s make this button look awesome with some cool CSS to give it the ghost button effect.
If you’re adding ghost buttons to a landing page design using Thrive Architect, click on the Cog Icon, and under Settings, click on Custom CSS. See images below.
Now carefully copy the CSS code below and paste it into the CSS window, then hit close to save.
/* Main Button CSS ------------------------------------------*/
.btn1 {
font-family: lato !important;
color: #494949 !important;
background: #transparent !important;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 5%;
padding-right: 5%;
font-size: 24px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none !important;
border: 4px solid #494949 !important;
border-radius: none;
}
/* Hover Button CSS ------------------------------------------*/
.btn1:hover {
color: #000 !important;
background: #transparent !important;
border: 4px solid #000 !important;
}
At this stage, if you added the above code with no changes made to it, your ghost button should look something like this –
If you want to customize the color and style of the button with your own CSS, here’s how to do it –
To make the corners of your buttons appear more rounded, simply change the value of border-radius: none; to 50px; like this:
border-radius: 50px;
}
If this doesn’t work, add !important after the value, like below, to override any other CSS you might have in your theme for general buttons:
!important;
}
If all goes well, it should look like this:
You can reduce the value of the px to make them less round.
To change the border outline and text color of your ghost button from dark grey, simply change the hex value of .btn1 { color: and border:
You will see they are both set at #494949 for dark grey. Check out this guide to get the hex code color value that you want.
To change the outline color and text of the button on hover, simply do exactly as the same above. Change the hex values of color: and border: to whatever you want. Currently, they are set at #000 for black.
At this stage, your new ghost effect button is NOT mobile responsive. Or maybe it is, you’ll have to double check.
If you find your ghost buttons are not mobile-friendly, here’s how to fix this –
Simply add the following CSS into the same window you added the CSS for the button in Thrive Architect.
Just paste it directly beneath the button CSS code and hit save.
/* Mobile responsive code -------------------------------------------*/
@media only screen and (max-width: 321px) {
body .btn1 {
font-size: 12px !important;
font-weight: 320 !important;
}}
Test your button and ensure everything is working honkey dory.
To customize the style of your buttons placed using the default WP editor (i.e. inside your posts or static WP pages), you’ll need to add the CSS codes above to your theme’s Style.CSS file.
You can usually find this file via your WP dashboard and by going to Appearance > Editor > Style.CSS for the theme you’re using.
Or, if you’re not able to access the style.css file via the dashboard, you can do so via FTP, or by accessing the File Manager in your cPanel (Web Host).
Important: Make sure you backup any files before you start making alterations to the code.
If you are experiencing problems with space around your button, or lack of it I should say. Try adding your button HTML box inside a content box (if you’re using Thrive Architect).
You will find the content box option in the elements menu in Thrive Architect.
Then, adjust the content box paddings or margins to add some space around it.
If you’re adding your buttons to a blog post or static page, add the following class before the div in your button HTML code. See below marked in red –
<div class="container_id" align="center"><a href="http://www.some-sample-url.com" target="_blank" button="" type="button" class="btn1">Enter Your CTA Here</a></div>
In the above code, give your class a name, it could be anything you want. Then add the following CSS snippet to your Style.CSS file.
Don’t forget to change the red part (below) with the same name you created for the Class name in your HTML.
You can then adjust the values to increase or decrease space around your button.
.container_id {
padding: 30px;
}
So there you have it, a simple way to create and add ghost buttons to your Thrive Architect landing pages or, to your blog posts and static WP pages using the default WP editor.
If you get stuck with anything in this tutorial, please don’t hesitate to get in touch with me. Or, check out my WordPress website services below.
Need help with your website? If you’re tired of tweaking and screwing around your WordPress website to no end, let’s have a friendly chat about your design ideas or the simple things you’d like to change. Click here to get started.
Note: This post may contain affiliate links to products or services that I use in my business and therefore recommend. This means if you click on an affiliate link and make a purchase of a product or service, I may earn a small commission, at no additional cost to you.
