• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Thinker

The WordPress Playground

  • Snippets
  • Best
  • Guides
  • Reviews
Home / Wordpress

October 22, 2018 Muhammed Swalih

How to Add CSS Ghost Buttons to WordPress Theme

how-to-add-css-ghost-buttons-to-wordpress-theme1

Ghost buttons are very popular these days. Many websites make use of these type of stylish button to attract the visitors to click it. Many of my friends asked me about the ghost buttons and How to add ghost buttons to their websites. So, I decided to write this tutorial which also helps you alongside with my friends. So, in this tutorial, you will get an idea on how to add CSS ghost buttons to your WordPress website.

What is Ghost Button?

The transparent buttons that blend into their background and only separated by a border are called the Ghost buttons. ‘Ghost buttons‘ is a web terminology used for this kind of buttons used in websites. Below is an example for the ghost button.how-to-add-css-ghost-buttons-to-wordpress-theme

Add CSS Ghost Buttons to WordPress Theme

To add the CSS Ghost button to the WordPress theme, you need to define a class of 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. The add the below code to the file.

If you prefer to add the code from the WordPress itself. Navigate to Appearance > 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 the WordPress due to some security or accessibility reasons. If so, you need to follow the FTP method to access the file.

.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 in your website by just assigning the class.

Avatar for Muhammed Swalih

Muhammed Swalih

A WordPress expert who has been tweaking WordPress functions, plugins, themes and almost everything related to WordPress for the past 5+ years.

Primary Sidebar

Related Articles

Footer

WP Thinker is a website that publishes everything related to WordPress, Plugins, Themes, SEO, Blogging, etc.

  • Facebook
  • Twitter
  • Pinterest

Copyright © 2023 · WP Thinker

  • About Us
  • Advertise
  • Write for Us
  • Privacy Policy
  • Terms and Conditions
  • Contact Us
This website uses cookies to serve you better. By continuing to use this website, you agree to our cookie and Privacy Policy.