Simple social buttons are boring. Therefore try to use more interesting ones. The following code is animating social buttons which transform on hover. These kind of sharing buttons are more interesting and can be used for more advanced pSimple social buttons are boring. Therefore try to use more interesting ones. The following code is animating social buttons which transform on hover. These kind of sharing buttons are more interesting and can be used for more advanced pages. You can add more social media icons simply by using correct icons. Enjoy!ages. Enjoy!


HTML
<!-- This script got from www.devanswer.com -->
<div class="social-container">
<ul class="social-icons">
<li><a href="https://www.facebook.com/sharer.php?u=http://devanswer.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.linkedin.com/shareArticle?mini=true&url=http://devanswer.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com"><i class="fa fa-pinterest"></i></a></li>
</ul><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
  background-color: rgba(0, 181, 245, 0.05);
}

.social-container {
  width: 400px;
  margin: 40vh auto;
  text-align: center;
}

.social-icons {
  padding: 0;
  list-style: none;
  margin: 1em;
}
.social-icons li {
  display: inline-block;
  margin: 0.15em;
  position: relative;
  font-size: 1.2em;
}
.social-icons i {
  color: #fff;
  position: absolute;
  top: 21px;
  left: 21px;
  transition: all 265ms ease-out;
}
.social-icons a {
  display: inline-block;
}
.social-icons a:before {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  content: " ";
  width: 60px;
  height: 60px;
  border-radius: 100%;
  display: block;
  background: linear-gradient(45deg, #00B5F5, #002A8F);
  transition: all 265ms ease-out;
}
.social-icons a:hover:before {
  transform: scale(0);
  transition: all 265ms ease-in;
}
.social-icons a:hover i {
  transform: scale(2.2);
  -ms-transform: scale(2.2);
  -webkit-transform: scale(2.2);
  color: #00B5F5;
  background: -webkit-linear-gradient(45deg, #00B5F5, #002A8F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 265ms ease-in;
}