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.

<!-- This script got from  -->
<link rel='stylesheet' href=''>
<script src=''></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>
<svg xmlns="#" version="1.1">
    <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" />
</svg><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href=" ">Developers Answer</a></div>

@import url(",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);
$(".button").click(function () {