Ghost Buttons With Icon using CSS | Hover and Focus Effect
In this tutorial, we create ghost buttons with icons using pure CSS? Hover and Focus effects.
I hope you will know what is Ghost buttons if you don’t know let’s me explain. generally Ghost Button is a simple button with transparent background color and border.
every programmer designer and developer used on multiple places on the webpages because of its look pretty and standard button. therefore this program will guide you to make ghost buttons.
therefore, in this blog, you will learn to create ghost buttons with icon hover and focus effect. when you mouseover on the buttons you will see the hover effects and focus on the buttons.
if you are on desktop then you can see the hover effects and focus effect by pressing tab. I hope you will enjoy this program and used these effect on multiple places after few changes on source code.
therefore, here in this program, I am sharing program for creating ghost buttons with icon, basically, I have used six simple buttons with icons. when you hover on it.
after that color appears over the buttons and Icons will also appear, In the six buttons I have used six different icons for different buttons like Primary, secondary, success, danger, warning, info. I hope you will enjoy this program and when you get the code then you will understand this program in a better way.
Explanation of source code for Ghost buttons with icons | Hover and Focus Effect
here, I will discuss the source code which I have used to create the ghost buttons with Icon, Let’s discuss it, I have created simple six buttons using <button> a tag such as:-
<button class="btn primary"></button>
<button class="btn Secondary"></button>
<button class="btn success"></button>
<button class="btn danger"></button>
<button class="btn warning"></button>
<button class="btn info"></button>
therefore, I have placed an icon and span for text inside the buttons.and all six buttons placed inside the <div> which looks like this <button class="btn primary"><i class="fas fa-university"></i><span>primary</span></button>
I have used font-Awesome icons library for six different icons which icons are placed inside the buttons. you can see the live demo, you need to click on live button demo which is given above.
therefore for icons reveal, first I have placed icons with, value and on hover its value becomes 0. in this program we are doing two works first on mouse hover, remove the margin value of icons and fill background color.
the transition value transition: margin-left 300ms ease-in-out; is used for creating animation effects. the transition value is used for creating animation effects. after that I have used btn :hover the property for hover effects and btn :focus property is used for focus on buttons like box-shadow: 0 0 0 0.3rem rgba(20, 137, 255, 0.7);
therefore, for all six buttons, I have used hover and focus effects, as you can see in the source code. I hope you will understand after getting the code segment for creating the program.
Therefore, for creating this program I have used two files such as the first file for HTML and Second file for CSS. Follow the steps to creating this program.
Step First: Create HTML file as the name “index.html” | change file name as you want