Ghost buttons have gained a lot of popularity these days. Ghost buttons are the transparent call to action buttons which are used by many websites to attract the visitors to click it. This article will walk you through the process of adding CSS ghost buttons in WordPress.
What is a Ghost Button?
Ghost buttons are the transparent buttons that blend around their background. They are only distinguishable by a border around them. Ghost button is a web design terminology used for this type of buttons. Currently, there are no specific plugins to create Ghost buttons.
1. Design Trends of Ghost Button
There are some common design trends which are being followed by creating Ghost buttons.
2. Photos in background
Ghost buttons look brilliant on top of background photos. Looking at the background image through the button creates a great visual effect.
3. White colored buttons
Choosing a white border and white text for your ghost button will create a great visual effect. However, you can choose any color of your choice.
Transition effects
CSS transition effects enhance the overall interaction experience of your Ghost button.
Adding CSS Ghost buttons to WordPress theme
For adding the CSS Ghost button to your WordPress theme, first, you will need to define a class of buttons. Then you will need to add a code. There are a few methods of adding the code.
The code can be added to the stylesheet of your theme. You can also use the FTP to add the code to the Stylesheet by going to /wp-content/themes/Your-Theme/ folder and locate the style.css file. You can also add the code from WordPress itself. Go to Appearances -> Editor and select the style.css or any other file which define the style of your theme.
Due to some security or accessibility reasons, the style.css file of some themes cannot be edited from WordPress. In such a case, you will need to follow the FTP method for accessing the file.
Below is the code that has been talked about in the above paragraphs.
.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;
}
Your .ghost-button class has been defined. Now, whichever links you want to show as a Ghost button, just add this class to them.
You can also change the download link to a button. This can be done by assigning the class to the text. Below is an example of the code.
<a href="https://www.techcrates.com/" class="ghost-button">TECH CRATES</a>
The rendered web version will look like this:TECH CRATES
Now you will be able to see a snappy ghost icon for your download link. This can be set anywhere by assigning the class.
Summation
Using Ghost buttons is a very popular trend nowadays. From above, you can see that adding a Ghost button is a very easy task. Let me know your views about the article in the comments section below.
Author Bio:
Sarah Clarke is an experienced WordPress developer, working at WordSuccor Ltd. If you are looking to hire dedicated wordpress developer, Sarah can be a good choice. She provides WordPress services and has a team of expert developers to assist her in every project.