Hello everyone, In this blog post you will learn how to create an amazing social media buttons for your website with awesome hover effect using only html and css.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Buttons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="social-media-container">
<h2>Follow Us On</h2>
<div class="border"></div>
<div class="social-media-buttons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
</div>
</body>
</html>
CSS CODE:
body{
margin: 0;
padding: 0;
background-color: #D6CDEA;
height: 100vh;
font-family: "Montserrat", sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.social-media-container{
display: flex;
align-items: center;
gap: 20px;
}
.social-media-container h2{
color: #2e3749;
font-size: 22px;
font-weight: 600;
cursor: pointer;
}
.border{
width: 120px;
height: 3px;
position: relative;
}
.border::before{
content: "";
position: absolute;
height: 3px;
width: 40px;
background-color: #2e3749;
transition: .3s linear;
}
.social-media-container:hover .border::before{
width: 100%;
}
.social-media-buttons a{
display: inline-block;
color: #2e3749;
font-size: 24px;
margin-right: 20px;
pointer-events: none;
transition: .5s;
opacity: 0;
}
.social-media-buttons a:nth-child(odd){
transform: translateY(-40px);
}
.social-media-buttons a:nth-child(even){
transform: translateY(40px);
}
.social-media-container:hover .social-media-buttons a{
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.social-media-buttons a i{
transition: .2s linear;
}
.fa-facebook-f:hover{
color: #1b74e4;
}
.fa-twitter:hover{
color: #1da1f2;
}
.fa-instagram:hover{
color: #c32aa3;
}
.fa-linkedin-in:hover{
color: #0a66c2;
}
.fa-tiktok:hover{
color: #010101;
}
No comments:
Post a Comment