Animated Social buttons (copied from here: http://codingflag.in/mysketch.php?sketch=62)

index.html

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--
NOTE :- Put above JQuery Library in starting of 'HEAD' tag.
-->
<div class="container">
  <div class="social-btn">
    <button class="btn-sc main-btn bars"><i class="icon-bars"></i></button>
    <div class="social-btn-list">
      <a href="#" class="facebook btn-sc"><i class="fa fa-facebook"></i></a><a href="#" class="twitter btn-sc"><i class="fa fa-twitter"> </i></a>
      <a href="#" class="gplus btn-sc"><i class="fa fa-google-plus">   </i></a>
      <a href="#" class="pinterest btn-sc"><i class="fa fa-pinterest-p"> </i></a>
    </div>
  </div>
</div>

main.js

$(document).ready(function(){
  $('.main-btn').click(function(){
    $(this).closest('.social-btn').toggleClass('open');
  });
});

style.css

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css';

*, *:after, *:before {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}
.container .btn-sc {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: none;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn-sc:active, .btn-sc:focus {
  outline: none;
}
.btn-sc + .btn-sc {
  margin-left: 15px;
}

.container .icon-bars {
  position: relative;
  margin: auto;
  display: block;
  width: 32px;
  height:2px;
  background: #eee;
  -moz-transition: 0.3s 0.3s;
  -o-transition: 0.3s 0.3s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.3s;
  -webkit-transition: 0.3s 0.3s;
  transition: 0.3s 0.3s;
}
.container .icon-bars:after {
  content: '';
  position: absolute;
  width: 2px;
  height: 30px;
  top: -14px;
  background: #eee;
}
.main-btn:active {
  transform:scale(1.17);
}
.container .social-btn {
  position: relative;
  float: right;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.social-btn .main-btn {
  z-index: 15;
  float: left;
}
.social-btn .social-btn-list {
  position: absolute;
  right: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.social-btn .social-btn-list li {
  display: inline-block;
}
.social-btn.open .icon-bars {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container .btn-sc i {
  line-height: 2.55;
  font-size: 25px;
}

.container .social-btn .icon-bars {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.container .social-btn .social-btn-list .btn-sc {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
}
.container .social-btn .social-btn-list .btn-sc:nth-child(1) {
  -moz-transition: 0.3s 1.2s;
  -o-transition: 0.3s 1.2s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 1.2s;
  -webkit-transition: 0.3s 1.2s;
  transition: 0.3s 1.2s;
}
.container .social-btn .social-btn-list .btn-sc:nth-child(2) {
  -moz-transition: 0.3s 0.9s;
  -o-transition: 0.3s 0.9s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.9s;
  -webkit-transition: 0.3s 0.9s;
  transition: 0.3s 0.9s;
}
.container .social-btn .social-btn-list .btn-sc:nth-child(3) {
  -moz-transition: 0.3s 0.6s;
  -o-transition: 0.3s 0.6s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.6s;
  -webkit-transition: 0.3s 0.6s;
  transition: 0.3s 0.6s;
}
.container .social-btn .social-btn-list .btn-sc:nth-child(4) {
  -moz-transition: 0.3s 0.3s;
  -o-transition: 0.3s 0.3s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.3s;
  -webkit-transition: 0.3s 0.3s;
  transition: 0.3s 0.3s;
}
.container .social-btn.open .social-btn-list .btn-sc {
  opacity: 1;
}
.container .social-btn.open .social-btn-list .btn-sc:nth-child(1) {
  right: 266px;
  -moz-transition: 0.3s 0.3s;
  -o-transition: 0.3s 0.3s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.3s;
  -webkit-transition: 0.3s 0.3s;
  transition: 0.3s 0.3s;
}
.container .social-btn.open .social-btn-list .btn-sc:nth-child(2) {
  right: 200px;
  -moz-transition: 0.3s 0.6s;
  -o-transition: 0.3s 0.6s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.6s;
  -webkit-transition: 0.3s 0.6s;
  transition: 0.3s 0.6s;
}
.container .social-btn.open .social-btn-list .btn-sc:nth-child(3) {
  right: 135px;
  -moz-transition: 0.3s 0.9s;
  -o-transition: 0.3s 0.9s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 0.9s;
  -webkit-transition: 0.3s 0.9s;
  transition: 0.3s 0.9s;
}
.container .social-btn.open .social-btn-list .btn-sc:nth-child(4) {
  right: 70px;
  -moz-transition: 0.3s 1.2s;
  -o-transition: 0.3s 1.2s;
  -webkit-transition: 0.3s;
  -webkit-transition-delay: 1.2s;
  -webkit-transition: 0.3s 1.2s;
  transition: 0.3s 1.2s;
}

.facebook {
  background: #3a5795;
}

.twitter {
  background: #55acee;
}

.gplus {
  background: #dd4b39;
}

.pinterest {
  background: #bd081c;
}

.bars {
  background: #151719;
}

.facebook:hover {
  color: #3a5795;
  background: #fff;
  border: 3px solid #3a5795;
}
.twitter:hover {
  color: #55acee;
  background: #fff;
  border: 3px solid #55acee;
}
.gplus:hover {
  color: #dd4b39;
  background: #fff;
  border: 3px solid #dd4b39;
}
.pinterest:hover {
  color: #bd081c;
  background: #fff;
  border: 3px solid #bd081c;
}