Today In this article, we’ll show you how to create Glowing Gradient Icon Hover Effects In HTML & CSS. This type of Gradient Icon Hover Effects is used on the websites For social links. This kind of Glowing Gradient Icon Hover Effects looks attractive on website.
You easily create these Glowing Gradient Icon Hover Effects Using HTML & CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML & CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Icon Hover Effects
In this design [Icon Hover Effects], on the webpage, there are four social media buttons. When you hover on a particular button or icon then the icon zoom in and the background gradient color appears with animation.
Preview Of Icon Hover Effects
See this video preview to get an idea of how this Gradient Icon Hover Effects looks like.
Hopefully, the above demo has helped you to create this Icon Hover Effect Tutorial. If you like the video, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Popup Modal using HTML, CSS & JS
- Animated Menu Indicator using CSS & JS
- Pure CSS Animated Tabs With Slide Indicator
Icon Hover Effects | Source Codes
To create this program (Icon Hover Effects). First, you need to create three Files one HTML and CSS File. After creating these files just paste the following codes in your file.
After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<!-- Created By Codecary -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animated Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href=""><i class="fa fa-gift" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-cog fa-spin" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-graduation-cap" aria-hidden="true"></i></a></li>
</ul>
</body>
</html>After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1b141a;
}
ul {
margin: 0;
padding: 0;
display: flex;
}
ul li {
position: relative;
list-style: none;
width: 100px;
height: 100px;
margin: 0 10px;
border-radius: 50%;
box-sizing: border-box;
/* background: #fff; */
}
ul li:before,
ul li:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
border-radius: 50%;
filter: blur(20px);
opacity: 0;
transition: 1s;
z-index: -1;
}
ul li:after {
filter: blur(40px);
}
ul li:hover:after,
ul li:hover:before {
opacity: 1;
}
ul li a {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
text-align: center;
line-height: 80px;
color: #fff;
background: #000;
font-size: 36px;
border-radius: 50%;
}
ul li a .fa {
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: 0.5s;
transform: rotateY(0deg) scale(0.8);
opacity: 0.2;
}
ul li a:hover .fa {
opacity: 1;
transform: scale(1.2);
}
ul li:nth-child(1) a,
ul li:nth-child(1):before,
ul li:nth-child(1):after{
background: linear-gradient(45deg, #ff0057, #e64a19);
}
ul li:nth-child(2) a,
ul li:nth-child(2):before,
ul li:nth-child(2):after{
background: linear-gradient(45deg, #89ff00, #00bcd4);
}
ul li:nth-child(3) a,
ul li:nth-child(3):before,
ul li:nth-child(3):after{
background: linear-gradient(45deg, #e91e63, #5d02ff);
}
ul li:nth-child(4) a,
ul li:nth-child(4):before,
ul li:nth-child(4):after{
background: linear-gradient(45deg, #ff0000, #ffc107);
}
now you’ve successfully created these Icon Hover Effects. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
