Icon Hover Effect using CSS | social media share icon animation

by







 Icon Hover Effect using CSS | social media share icons animation 



Welcome🎉 to Code With Random blog. In this blog, we will explore how to create an Icon Hover Effect. To create the Hover effect we are going to use simple HTML & CSS. Hope you enjoy our blog so let’s start with a basic HTML structure for Icon Hover Effect.







We use these icon hover effects in almost all web pages we make and attach them to the footer of a webpage.

HTML code for Icon 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>

Our HTML document is ready, here we have created a simple structure for various icons of different social media applications. We are using font awesome library for the icons.


The output for our HTML document without CSS is available below. 

Output.
Icons Hover Effect using css | social media share icon animation

CSS for Icon Hover Effect

Next, we will add style to the HTML structure. To add a hover effect to the social media icons we will use HTML :hover pseudo-class, which allows special styling for hover effects. When the cursor hovers over an object the hover pseudo-class applies special style properties to it.

 @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);  
 }

Now we have completed our CSS section,  Here is our updated output with  CSS. Hope you like Icons Hover Effect, using CSS.  

Output



Icons Hover Effect using css output

Github link of this project

Check it more





For more such awesome projects read 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 

Share on:

0 thoughts on “Icon Hover Effect using CSS | social media share icon animation”

Leave a Comment