Build easy social media hover using HTML CSS

Font Awesome is a, well, awesome tool that gives developers free access to hundreds of different useful icons to add to their sites and web apps. It’s becoming a really nice alternative to downloading PSD icon sets, largely because since the icons are HTML elements, they can be completely manipulated (color, size, positioning) using CSS. They’re much more dynamic than .jpegs and .pngs. Font Awesome has icons for every occasion, but the ones I find myself using most often are the ones that correspond to different social media platforms. Making those popular social media button icons is SO easy using Font Awesome and CSS — no photoshop required. 

Html Code:

<link rel="https://use.fontawesome.com/releases/v5.0.13/css/all.css" />
<div class="container">
  <ul class="social">
    <li class="facebook"><a href="/"><i class="fab fa-facebook-f"></i></a></li>
    <li class="twitter"><a href="/"><i class="fab fa-twitter"></i></a></li>
    <li class="youtube"><a href="/"><i class="fab fa-youtube"></i></a></li>
    <li class="google-plus"><a href="/"><i class="fab fa-google-plus-g"></i></a></li>
    <li class="pinterest"><a href="/"><i class="fab fa-pinterest"></i></a></li>
    <li class="linkedin"><a href="/"><i class="fab fa-linkedin-in"></i></a></li>
  </ul>
  <p>Design By <a href="http://www.rhsuman.xyz/">RH Suman</a></p>
</div>

CSS Code

@import url('https://use.fontawesome.com/releases/v5.0.13/css/all.css');
body{
  margin:0;
  padding:0;
  background-color:#f5f5f5;
}
.container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
p{
  text-align: center;
  font-size: small;
}
ul.social{
  margin: 0;
  padding: 0;
}
ul.social li{
  list-style-type: none;
  display: inline-block;
  background-color: #fff;
  box-shadow; 0 0 3px 2px #000;
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: relative;
}
ul.social li a{
  display: block;
  text-align: center;
  font-size: 2rem;
  padding: 8px 0;
  color: #fff;
  text-shadow: 0 0 1px #bbb;
  transition: .5s;
}
ul.social li a:hover{
  transform: scale(1.3) rotate(-10deg) ;
}
ul.social li.facebook{
  background: #3b5999
}
ul.social li.twitter{
  background: #55acee
}
ul.social li.youtube{
  background: #cd201f
}
ul.social li.google-plus{
  background: #dd4b39
}
ul.social li.pinterest{
  background: #bd081c
}
ul.social li.linkedin{
  background: #0077B5;
}