Social Media Icons Hover Animation Using HTML & CSS
.png "Social Media Icons HTML and CSS | Hover Icons Animation - Codewithrandom")
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
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
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
Invece di:
.social-menu ul li .fab:hover{
color: #fff;
}
andrebbe messo:
.social-menu ul li:hover .fab{
color: #fff;
}