Let’s create a Social Media Icons Hover Effect using HTML and CSS. This project will display a set of social media icons that animate with a smooth and eye-catching hover effect, making your website feel more modern and interactive.
We’ll use:
- HTML to add the social media icons.
- CSS to style the icons and apply unique hover animations like color changes, scaling, glow effects, or bounce.
This is a great way to enhance your website’s footer or contact section while practicing your front-end skills. Let’s get started and make your social links look awesome! 🌐✨
HTML :
This HTML code creates a simple webpage that displays a list of social media icons (Facebook, Twitter, LinkedIn, YouTube) using Font Awesome; when styled with style.css, these icons can have hover effects, and each icon is clickable (though all links currently point to #, meaning they don’t go anywhere).
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Social Media Icons hover effect | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/22c625fc9a.js" crossorigin="anonymous"></script>
</head>
<body>
<ul>
<li>
<a href="#"> <i class="fa-brands fa-facebook-f icon"></i></a>
</li>
<li>
<a href="#"><i class="fa-brands fa-x-twitter icon"></i></a>
</li>
<li>
<a href="#"><i class="fa-brands fa-linkedin-in icon"></i></a>
</li>
<li>
<a href="#"><i class="fa-brands fa-youtube icon"></i></a>
</li>
</ul>
</body>
</html>
CSS :
This CSS styles a webpage with a dark background and center-aligned circular social media icons. The icons sit inside white circles and change color when hovered. Each icon spins and its background smoothly slides in with the brand color (Facebook blue, Twitter black, LinkedIn blue, YouTube red). The :before pseudo-element creates the sliding background effect, while transform, transition, and z-index manage the animation and layering.
body {
margin: 0;
padding:0;
background: #252432;
}
ul {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background-color: #fff;
text-align: center;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .icon {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .icon {
color: #fff;
transform: rotateY(360deg);
}
ul li a:before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #161616;
}
ul li:nth-child(3) a:before {
background: #0077b5;
}
ul li:nth-child(4) a:before {
background: #ff1414;
}
In conclusion, creating Social Media Icons with Hover Effects using HTML and CSS is a fun and easy way to improve your website’s look and feel. With just a few lines of code, you can make your social icons more engaging and stylish. Keep coding and adding cool effects to your UI! 💻🎨
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
