You are currently viewing Social Media Icons Hover Animation Using HTML & CSS

Social Media Icons Hover Animation Using HTML & CSS

Social Media Icons Hover Animation Using HTML & CSS

Social Media Icons Hover Animation Using HTML & CSS
Social Media Icons Hover Animation Using HTML & CSS

 

Welcome to the Codewithrandom blog. We learn how to create Social Media Icons and Hover Animation. We use HTML and CSS to Create Social Media icons and give Animation on hover.

We Hope you enjoy our blog so let’s start with a basic Html Structure for Social Media Icons Hover Animation.

HTML Code For Social Media Icons Hover Animation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Socail Media Icon</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="social-menu">
<ul>
<li><a href="#" target="blank"><i class="fab fa-github"></i></i></a></li>
<li><a href="#" target="blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="#" target="blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fab fa-codepen" target="blank"></i></a></li>
</ul>
</div>
<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
</body>
</html>

There is all the Html Code for the Social Media Icons Hover Animation. Now, you can see output without Css. then we write CSS Code For Social Media Icons Hover Animation.

50+ Html ,Css & Javascript Projects With Source Code

Output

Social Media Icons Hover Animation Using HTML & CSS
Social Media Icons Hover Animation Using HTML & CSS

 

CSS Code For Social Media Icons Hover Animation

body{
background: #d8d8d8;
}
.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 .fab{
font-size: 30px;
line-height: 60px;
transition: .3s;
color: #000;
}
.social-menu ul li .fab:hover{
color: #fff;
}
.social-menu ul li a{
position: relative;
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
text-align: center;
transition: .6s;
box-shadow: 0 5px 4px rgba(0,0,0,.5);
}
.social-menu ul li a:hover{
transform: translate(0, -10%);
}
.social-menu ul li:nth-child(1) a:hover{
background-color: rgba(0, 0, 0, 0.829);
}
.social-menu ul li:nth-child(2) a:hover{
background-color: #E4405F;
}
.social-menu ul li:nth-child(3) a:hover{
background-color: #0077b5;
}
.social-menu ul li:nth-child(4) a:hover{
background-color: #000;
}

We have completed our Social Media Icons Hover Animation Project. Here is our final updated output HTML + CSS.

Final Output Of Social Media Icons Hover Animation

Social Media Icons Hover Animation Using HTML & CSS
Social Media Icons Hover Animation Using HTML & CSS

Weather App Using Html,Css And JavaScript 

We have completed our Social Media Icons Hover Animation. Here is our updated output with Html and Css. Hope you like the Social Media Icons Hover Animation Project. you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

This post teaches us to create Social Media Icons and Hover Animation Using Html and Css. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 
code by – Sanket Bodake

This Post Has 0 Comments

  1. Andrea Baccolini

    Invece di:
    .social-menu ul li .fab:hover{
    color: #fff;
    }
    andrebbe messo:
    .social-menu ul li:hover .fab{
    color: #fff;
    }

Leave a Reply