.share
  .fab.no
  .fab.no
  .fab.no
View Compiled
$t: .3s;

.share, .share:before, .share:after, .fab {
  height: 56px;
  width: 56px;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
}

.share {
  position: relative;
  &:before, 
  &:after {
    content: '';
    will-change: transform;
  }
  &:before {
    background: url(https://cbwconline.com/IMG/Codepen/Plus-Light-Blue.svg) center/28px no-repeat;
    z-index: 5;
    transition: $t;
  }
  &:after {
    background: #fff;
    box-shadow: 0 2px 5px rgba(#000, .3);
    z-index: -1;
    transition: $t * 1.3;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  &.active {
    &:before { transform: rotate(45deg); }
    &:after { 
      width: 3000px;
      height: 3000px;
    }
  }
}

.fab {
  box-shadow: 0 2px 5px rgba(#000, .3);
  transition: $t;
  animation: $t down forwards;
  opacity: 0;
  will-change: animation;
  &:nth-child(1) {
    background: #1DA1F2 url(https://cbwconline.com/IMG/Codepen/Twitter.svg) center/28px no-repeat;
    top: -132px;
  }
  &:nth-child(2) {
    background: #46629E url(https://cbwconline.com/IMG/Codepen/Facebook.svg) center/28px no-repeat;
    top: -66px;
  }
  &:nth-child(3) {
    background: #DB4437 url(https://cbwconline.com/IMG/Codepen/Google.svg) center/28px no-repeat;
  }
  &.active {
    animation: $t * 1.6 up forwards;
    &:nth-child(1) {
      animation-delay: $t * 1.3;
    }
    &:nth-child(2) {
      animation-delay: $t / 1.5;
    }
  }
  &.no {
    animation: none;
  }
}

@keyframes up {
  50% {
    transform: translateY(-170%);
  }
  100% {
    opacity: 1;
    transform: translateY(-130%);
  }
}

@keyframes down {
  0% {
    opacity: 1;
    transform: translateY(-130%);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
    top: 0;
  }
}
View Compiled
$(".share").on('click', function(e) {
  $(".fab").removeClass("no");
  if(e.target != this) return;
  $('.share, .fab').toggleClass("active");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js