In this tutorial, we'll take your web design skills to the next level by exploring how to create stunning social media icon hover effects using HTML and CSS. Whether you're a seasoned developer or just starting out, these effects will add a touch of interactivity and professionalism to your website.
1.Create a New Folder
2.Open the Folder in Vs Code
3.Create index.html and style.css Files
4.Begin Coding
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/562fae65df.js" crossorigin="anonymous"></script>
<title>Social Media Icon With Hover Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="social-menu">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa-brands fa-spotify"></i></a></li>
</ul>
</div>
</body>
</html>
style.css
body{
background-color: #fff;
}
.social-menu ul{
position: absolute;
top: 50%;
left: 50%;
padding: 0;
margin: 0;
transform: translate(-50%,-50%);
display: flex;
}
.social-menu ul li{
list-style: none;
margin: 0 15px;
}
.social-menu ul li .fa-brands{
font-size: 30px;
line-height: 60px;
transition: 0.5s;
color: #000;
}
.social-menu ul li .fa-brands:hover{
color: blue;
}
.social-menu ul li a{
position: relative;
border-radius: 50%;
width: 60px;
height: 60px;
display: block;
transition: 0.5s;
text-align: center;
box-shadow: 0 5px 4px rgba(0,0,0,0.5);
}
.social-menu ul li a:hover{
transform: translate(0,-10px);
}
.social-menu ul li:nth-child(1) a :hover{
color:#4267B2 ;
}
.social-menu ul li:nth-child(2) a :hover{
color:#C4302b ;
}
.social-menu ul li:nth-child(3) a :hover{
color:#0A66C2 ;
}
.social-menu ul li:nth-child(4) a :hover{
color:#1db954 ;
}
Comments
Post a Comment