<div class="box"> 
  <div class="share">
    <div class="line3"></div>
    <div class="line2"></div>
    <div class="line"></div>
    <div class="icon">
      <h1>share</h1>
      <div class="btn">+</div>
    </div>
    
  </div>
    <div id="hide" class="active">
      <ul>
        <li class="one el"><i class="fab fa-twitter"></i></li>
        <li class="two el"><i class="fab fa-facebook"></i></li>
        <li class="three el"><i class="fab fa-instagram"></i></li>
        <li class="four el"><i class="fab fa-youtube"></i></li>
        <li class="five el"><i class="fab fa-google-plus-g"></i></li>
      </ul>
    </div>
</div>

$primary: #2A4870;
$secondary: #1E73B5;
$light: #33A8CC;
$highlight: #9ECE92;
$white: #D0D8DB;
$dark: #6D7172;

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

$font: 'Open Sans', sans-serif;


html {
  min-height: 100%;
  display: grid;
}

body {
  display: grid;
  background: $white;
}

.box {
  margin: auto;
  width: 100px;
  height: 50px;
}

.share {
  position: absolute;
  width: 120px;
  height: 50px;
  border-radius: 30px;
  outline: none;
  border: 0;
  background: $primary;
  overflow: hidden;
  transition: all .5s ease;
  box-shadow: 3px 5px 10px rgba($primary, .5);
}

.scale {
  transform: scale(1.1);
  transition: all .5s ease;
}

.line, .line2, .line3 {
  width: 13px;
  height: 60px;
  position: absolute;
  transform: rotate(15deg);
}

.line {
  right: 22px;
  top: -5px;
  background: $highlight;
}

.line2 {
  right: 10px;
  background: $light;
}

.line3 {
  right: -3px;
  background: $secondary;
}

.icon {
  user-select: none;
  position: absolute;
  color: $white;
  left: 15px;
  top: 6px;
  h1 {
    font-family: $font;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: .9em;
  }
  .btn {
    position: absolute;
    right: -27px;
    background: rgba($white, .9);
    color: $primary;
    top: 7px;
    padding: 3px 7px;
    border-radius: 50%;
  }
}

.active {
  z-index: -2;
  margin-top: -10px;
  margin-left: -60px;
  position: absolute;
  opacity: 0;
  transition: all .7s ease;
  li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    color: $white;
    border-radius: 50%;
    background: $primary;
    position: absolute;
    box-shadow: 2px 2px 6px rgba($primary, .5);
  }
  i {
    margin: 10px 10px 8px 9px;
  }
}

.open {
  position: absolute;
  margin-left: -60px;
  margin-top: 50px;
  opacity: 1;
}

.fab {
  padding-left: 5px;
}

.one {
  left: 0;
}

.two {
  left: 50px;
}

.three {
  left: 100px;
}

.four {
  left: 150px;
}

.five {
  left: 200px;
}

#hide {
  visibility: hidden;
}

$('.share').on('click', function(){
  $(this).toggleClass('scale');
  $('div#hide').removeAttr('id');
  $('.active').toggleClass('open');
});

// let open = anime({
//   targets: '.el',
//   translateY: 250,
//   direction: 'alternate',
//   delay: function(el, i, l) {
//     return i * 100;
//   }
// });