Table of Contents

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

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