In this code, the social network icon is not normally visible and appears with a sticky animation by clicking on the share button. Clicking this button again will make the icons disappear. This saves some physical space on your website.


HTML
<!-- This script got from www.devanswer.com  -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<div class="container">
  <div class="button">Share</div>
  <div class="social twitter"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></div>
  <div class="social facebook"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></div>
  <div class=" social google"><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></div>
  <div class="social youtube"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></div>
</div>
<svg xmlns="#" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
  	</filter>
  </defs>
</svg><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com ">Developers Answer</a></div>
                        

CSS
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600");
body {
    font-family: "Source Sans Pro", sans-serif;
    background: linear-gradient(#B388EB, #8093F1, #00B2CA);
    background: #4A5759;
    overflow: hidden;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    filter: url("#goo");
}
.button {
    z-index: 99;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 40px;
    background: linear-gradient(45deg, #B388EB, #8093F1);
    border-radius: 20px;
    color: #FFF;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 200;
}
.social {
    opacity: 0;
    position: relative;
    margin: 8px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: inline-block;
    color: #FFF;
    font-size: 20px;
    text-align: center;
}
.social i {
    margin-top: 10px;
}
.social a {
    color: #FFF;
}
.twitter {
    background: #00aced;
}
.facebook {
    background: #3b5998;
}
.google {
    background: #dd4b39;
}
.youtube {
    background: #bb0000;
}
.clicked {
    opacity: 1;
    transition: 1.2s all ease;
    transform: translateY(56px);
}
Javascript
$(".button").click(function () {
    $(".social.twitter").toggleClass("clicked");
    $(".social.facebook").toggleClass("clicked");
    $(".social.google").toggleClass("clicked");
    $(".social.youtube").toggleClass("clicked");
})