Hello readers, Today In this article I am going to show you how to create Glowing Social Media Icon Hover Effect Using HTML & CSS. This type of Icon Hover Effect is used on the websites for the Social Media Icon Design. One of the most beautiful and good-looking designs.
You easily create a Glowing Social Media Icon Hover Effect 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 Social Media Icon
Normally show social media icon with box corner. All social media icons have their own color. When you click the social icon then shows the box effect and the font icon also glows with zoom.
Watch the video tutorial to create Social Media Icon Hover Effect
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Glowing Social Media Icon Hover Effect using Fontawesome Icon step by step completely beautifully. So you can learn how to make this Social Media Icon Hover Effect. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Glowing Social Icon Hover Effect Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Sidebar Menu Using HTML, CSS & JS
- How To Make a Website Using HTML & CSS
- Portfolio Filter Gallery Using HTML CSS & JS
Social Icon Hover Effect | Source Codes
You have to create an HTML & CSS File For this Social Icon Hover Effect. After creating these files just paste the following codes into your file.
The First Step, 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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Social Media Icon Hover Effect</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!------FowtAwesome CDN Link-------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<ul>
<li style="--clr: #1877f2">
<a href="#">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li style="--clr: #ff0000">
<a href="#">
<i class="fa-brands fa-youtube"></i>
</a>
</li>
<li style="--clr: #1da1f2">
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li style="--clr: #c32aa3">
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li style="--clr: #25d366">
<a href="#">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
</ul>
</div>
</body>
</html>Second Step, you have 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:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #222;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--bg);
}
.container ul {
display: flex;
position: relative;
gap: 50px;
}
.container ul li {
position: relative;
list-style: none;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.5s;
}
.container ul li:before {
content: "";
position: absolute;
inset: 30px;
box-shadow: 0 0 0 10px var(--clr), 0 0 0 20px var(--bg), 0 0 0 22px var(--clr);
transition: 0.5s;
}
.container ul li:hover:before {
inset: 0;
}
.container ul li:after {
content: "";
position: absolute;
inset: 0;
background: var(--bg);
transform: rotate(45deg);
}
.container ul li:hover {
z-index: 1000;
transform: scale(0.75);
}
.container ul li a {
position: relative;
text-decoration: none;
color: var(--clr);
font-size: 1.5em;
z-index: 10;
transition: 0.5s;
}
.container ul li a:hover {
font-size: 3em;
filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}now you’ve successfully created these Social Media Icon Hover Effect Using HTML & CSS. If your code does not work or facing any error/problem comment down or contact us through the contact page.
