Easy social media hover HTML CSS

This is where this tutorial will come in handy (just for you!). I’ll show you an easy way to add a hover effect on top of those nifty social media icons!

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>
</div>

CSS Code:

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

RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply