Icons Hover Effect using css | social media share icon animation

 Icons Hover Effect using css | social media share icon  animation 





Icons Hover Effect using css | social media share icon  animation


Welcome🎉 to Code With Random blog. In this blog, we learn that how to create an Icons Hover Effect. We use HTML & CSS  for this Icons Hover Effect. Hope you enjoy our blog so let's start with a basic HTML structure for Icons Hover Effect.







HTML code for Icons Hover Effect 

 <!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>Icons Hover Effect</title>  
   <link rel="stylesheet" href="style.css">  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />  
 </head>  
 <body>  
   <div class="container">  
     <div class="box">  
       <div class="icon instagram">  
         <i class="fab fa-instagram fa-2x"></i>  
       </div>  
       <p>Instagram</p>  
     </div>  
     <div class="box">  
       <div class="icon facebook">  
         <i class="fab fa-facebook fa-2x"></i>  
       </div>  
       <p>Facebook</p>  
     </div>  
     <div class="box">  
       <div class="icon twitter">  
         <i class="fab fa-twitter fa-2x"></i>  
       </div>  
       <p>Twitter</p>  
     </div>  
     <div class="box">  
       <div class="icon whatsapp">  
         <i class="fab fa-whatsapp fa-2x"></i>  
       </div>  
       <p>Whatsapp</p>  
     </div>  
   </div>  
 </body>  
 </html>  
There is all HTML code for the Icons Hover Effect. Now, you can see output without CSS, then we write CSS for our Icons Hover Effect.
Output.
Icons Hover Effect using css | social media share icon  animation

CSS for Icons Hover Effect

 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
 *{  
   margin: 0;padding: 0;  
   box-sizing: border-box;  
   font-family: 'Poppins', sans-serif;  
 }  
 body{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   height: 100vh;  
 }  
 .box{  
   width: 55px;  
   height: 58px;  
   position: relative;  
   display: flex;  
   align-items: center;  
   overflow: hidden;  
   padding: 5px;  
   cursor: pointer;  
   margin: 0.6em;  
   transition: all .4s;  
 }  
 .box:hover{  
   width: 160px;  
   background: #c32aa3;  
   border-radius: 10px;  
   color: white;  
   box-shadow: 0 0 50px #b315917c;  
 }  
 .box:nth-child(2):hover{  
   background: #1877f2;  
   box-shadow: 0 0 50px #1876f285;  
 }  
 .box:nth-child(3):hover{  
   width: 130px;  
   background: #1da1f2;  
   box-shadow: 0 0 50px #1da0f280;  
 }  
 .box:nth-child(4):hover{  
   background: #25d366;  
   box-shadow: 0 0 50px #25d3657e;  
 }  
 p{  
   transform: translate(60px);  
 }  
 .box .icon{  
   position: absolute;  
   width: 50px;  
   height: 50px;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   color: white;  
   border-radius: 10px;  
   margin-right: 10px;  
   transition: all .4s;  
 }  
 .instagram{  
   background: #c32aa3;  
 }  
 .facebook{  
   background: #1877f2;  
 }  
 .twitter{  
   background: #1da1f2;  
 }  
 .whatsapp{  
   background: #25d366;  
 }  
 .box:hover .icon{  
   background: white;  
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.26);  
   color: rgb(59, 59, 59);  
 }  

Output




Icons Hover Effect using css | social media share icon  animation

Github link of this project

Check it more









Now we have completed our CSS section,  Here is our updated output with  CSSHope you like Icons Hover Effect. Using CSS, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕


In this post, we learn how to create an Icons Hover Effect using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post