floating social media icons | pure css icon - codewithrandom

floating social media icons | pure css icon - codewithrandom

floating social media icons | pure css icon - codewithrandom


 Welcome🎉 to Code With Random blog. In this blog, we learn that how to create floating social media icons. We use HTML & CSS  for these simple floating social media icons. Hope you enjoy our blog so let's start with a basic HTML structure for floating social media icons.

HTML code

 <!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>floating social media icons </title>  
   <link rel="stylesheet" href="style.css">  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">  
  </head>  
  <body>  
   <ul>  
    <li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>  
    <li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>  
    <li><a href="#"><i class="fab fa-google-plus-g" aria-hidden="true"></i></a></li>  
    <li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>  
    <li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>  
   </ul>  
  </body>  
 </html>  
There is all HTML code for the floating social media icons. Now, you can see output without CSS, then we write CSS for floating social media icons.
Output
floating social media icons | pure css icon - codewithrandom

CSS code

 body {  
  margin:0;  
  padding:0;  
  background: #dedede;  
 }  
 ul {  
  position:absolute;  
  top:50%;  
  left:50%;  
  transform: translate(-50%, -50%);  
  margin:0;  
  padding:0;  
  display:flex;  
 }  
 ul li {  
  list-style: none;  
 }  
 ul li a {  
  position: relative;  
  width:60px;  
  height:60px;  
  display:block;  
  text-align:center;  
  margin:0 10px;  
  border-radius: 50%;  
  padding: 6px;  
  box-sizing: border-box;  
  text-decoration:none;  
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);  
  background: linear-gradient(0deg, #ddd, #fff);  
  transition: .5s;  
 }  
 ul li a:hover {  
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);  
  text-decoration:none;  
 }  
 ul li a .fab {  
  widht: 100%;  
  height:100%;  
  display:block;  
  background: linear-gradient(0deg, #fff, #ddd);  
  border-radius: 50%;  
  line-height: calc(60px - 12px);  
  font-size:24px;  
  color: #262626;  
  transition: .5s;  
 }  
 ul li:nth-child(1) a:hover .fab {  
  color: #3b5998;  
 }  
 ul li:nth-child(2) a:hover .fab {  
  color: #00aced;  
 }  
 ul li:nth-child(3) a:hover .fab {  
  color: #dd4b39;  
 }  
 ul li:nth-child(4) a:hover .fab {  
  color: #007bb6;  
 }  
 ul li:nth-child(5) a:hover .fab {  
  color: #e4405f;  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
floating social media icons | pure css icon - codewithrandom

Now we have completed our CSS section,  Here is our updated output with  CSSHope you like the social media icons, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create 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 

Check out more.....

Post a Comment

Previous Post Next Post