Cacher is the code snippet organizer for pro developers

body {
  height: 100vh;
  font-family: 'Roboto Condensed', sans-serif;
}

h2 { 
  font-size: 2rem;
  font-weight: bold; 
  text-transform: uppercase;
  margin-bottom: 2rem;
}
p {
  text-align: justify;
  text-indent: 2rem;
  line-height: 1.6rem;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background: #eee;
  padding: 2rem;
  box-sizing: border-box;
  box-shadow: 0 20px 30px -10px rgba(0,0,0,0.2);
  overflow: hidden;
}
.share {
  position: absolute;
  top: 0;
  right:0;
  width: 40px;
  height: 40px;
  background: #2ecc71;
  cursor: pointer;
  &:hover {
    animation: glow 1s infinite;
  }
  .fa-share-alt {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 40px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #2ecc71;
  }
  .social {
    opacity: 1;
    position: absolute;
    top: -200%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    .fa {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 100%;
      background: #ccc;
      &.fa-twitter {
        background: #ccc;
        color: #000;
        border: solid 2px transparent;
        box-sizing: border-box;
        transition: all 0.4s ease;
        &.shared {
          background: #0084b4;
          color: #fff;
          border: solid 2px #fff;
          box-sizing: border-box;
          transition: all 0.4s ease;
        }
      }
      &.fa-facebook {
        background: #ccc;
        color: #000;
        border: solid 2px transparent;
        box-sizing: border-box;
        transition: all 0.4s ease;
        &.shared {
          background: #3b5998;
          color: #fff;
          border: solid 2px #fff;
          box-sizing: border-box;
          transition: all 0.4s ease;
        }
      }
      &.fa-google-plus {
        background: #ccc;
        color: #000;
        border: solid 2px transparent;
        box-sizing: border-box;
        transition: all 0.4s ease;
        &.shared {
          background: #d34836;
          color: #fff;
          border: solid 2px #fff;
          box-sizing: border-box;
          transition: all 0.4s ease;
        }
      }
      &.fa-close:hover {
        background: crimson;
        color: #fff;
        transition: all 0.4s ease;
      }
    }
  }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

$(".fa-share-alt").click(function(){
  $(".share").animate({
    width: "400px",
    height: "300px"
  }, 400, function(){
    $(".fa-share-alt").animate({
      opacity: 0
    }, 400, function(){
      $(".social").animate({
        top:"50%",
        opacity: 1,
        easing: "ease-in"
      }, 1000)
    })
  });
})
$(".fa-twitter").click(function(){
  $(this).toggleClass("shared");
})
$(".fa-facebook").click(function(){
  $(this).toggleClass("shared");
})
$(".fa-google-plus").click(function(){
  $(this).toggleClass("shared");
})

$(".fa-close").click(function(){
  $(".social").animate({
    top: "-250%",
    opacity: 0,
    easing: "ease-out"
  }, 500, function(){
    $(".share").animate({
      width: "40px",
      height: "40px"
    }, 400, function(){
      $(".fa-share-alt").animate({
        opacity: 1
      }, 400)
    })
  });
})

<article>
  <div class="share">
    <div class="fa fa-share-alt"></div>
    <div class="social">
      <div class="fa fa-twitter"></div>
      <div class="fa fa-facebook"></div>
      <div class="fa fa-google-plus"></div>
      <div class="fa fa-close"></div>
    </div>
  </div>
  <h2>lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante orci, aliquet eu laoreet et, molestie id dolor. Praesent sed velit ac enim consectetur convallis. Ut eu cursus enim. Curabitur ac luctus justo, aliquet mattis orci. Fusce facilisis feugiat porttitor.</p>
</article>