Social Media Icons HTML and CSS | Hover Icons Animation – Codewithrandom

by







Social Media Icons HTML and CSS | Hover Icons Animation – Codewithrandom

Welcome🎉 to Code With Random blog. We learn how to create Social Media Icons in HTML and CSS. We use HTML & CSS  for Social Media Icons We Hope you enjoy our blog so let’s start with a basic HTML structure for Social Media Icons.  

HTML code

 <!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 HTML code for the Social Media Icons. Now, you can see output without CSS, then we write CSS for the Social Media Icons.

Output

Social Media Icons HTML and CSS | Hover Icons Animation - Codewithrandom

CSS code

 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 CSS section,  Here is our final updated output CSS.

Final Output

Social Media Icons HTML and CSS | Hover Icons Animation - Codewithrandom

We have completed our CSS section,  Here is our updated output with CSS. Hope you like the Social Media Icons, 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 a Social Media Icons using simple HTML & 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

Check out more…..



Share on:

0 thoughts on “Social Media Icons HTML and CSS | Hover Icons Animation – Codewithrandom”

Leave a Comment