input(type="checkbox")#menu-trigger.menu__trigger
.menu
  label(for="menu-trigger").menu__btn
    i.menu__btn-icon.fa.fa-plus
  .menu__list
    .menu__item
      label(for="menu-trigger").menu__link
          i.menu__icon.fa.fa-heart
      span.menu__tip Save to Favorites
    .menu__item
      label(for="menu-trigger").menu__link
        i.menu__icon.fa.fa-pinterest
      span.menu__tip Share to Pinterest
    .menu__item
      label(for="menu-trigger").menu__link
        i.menu__icon.fa.fa-google-plus
      span.menu__tip Share to Google Plus
    .menu__item
      label(for="menu-trigger").menu__link
        i.menu__icon.fa.fa-facebook
      span.menu__tip Share to Facebook
    .menu__item
      label(for="menu-trigger").menu__link
        i.menu__icon.fa.fa-twitter
      span.menu__tip Share to Twitter
    .menu__item
      label(for="menu-trigger").menu__link
        i.menu__icon.fa.fa-envelope
      span.menu__tip Send by Email
      

@use postcss-nested;
body {
  margin: 0;
  padding: 0;
  background: #202225;
  font-family: arial, sans-serif;
}

.menu {
  position: absolute;
  top: 30%;
  left: 50%;
  margin-left: -22px;
  color: #D7D7D8;
  font-size: 20px;
  line-height: 1;
  font-weight: normal;
  width: 45px;
  
  &:before {
    content: '';
    transition: transform .3s ease-in-out .3s,
                opacity .3s ease-in-out .6s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    transform: scaleY(0);
    opacity: 0;
    background: #36393E;
  }
  
  &__trigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    &:checked + .menu:before {
      transition: opacity .3s linear,
                  transform .3s ease-out .3s;
      transform: scaleY(1);
      opacity: 1;
    }
    &:checked + .menu .menu__item {
      transition: transform .3s ease-in-out,
                  opacity .3s linear;
      transform: translate(0, 0);
      opacity: 1;
      &:nth-child(1) { transition-delay: .65s; }
      &:nth-child(2) { transition-delay: .6s; }
      &:nth-child(3) { transition-delay: .55s; }
      &:nth-child(4) { transition-delay: .5s; }
      &:nth-child(5) { transition-delay: .45s; }
      &:nth-child(6) { transition-delay: .4s; }
    }
    &:checked + .menu .menu__btn {
      &:before {
        transition: opacity .3s ease-in-out;
        opacity: 1;
      }
      &:after {
        transition: opacity .1s linear .3s;
        opacity: 1;  
      }
    }
    
  }

  &__btn {
    display: block;
    height: 45px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    position: relative;
    z-index: 10;
    &:hover {
      .menu__btn-icon {
        color: #fff;
      }
    }
    &:before {
      content: '';
      transition: opacity .3s ease-in-out .6s;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #36393E;
      opacity: 0;
    }
    &:after {
      content: '';
      transition: opacity .1s linear;
      position: absolute;
      opacity: 0;
      width: 28px;
      height: 1px;
      bottom: 0;
      left: 50%;
      margin-left: -14px;
      background: #656970;
    }
    &-icon {
      transition: color .15s ease-in-out;
      position: relative;
    }
  }
  &__tip {
    transition: opacity .2s ease-in-out;
    color: #202225;
    background: #fff;
    border-radius: 3px;
    font-size: 12px;
    padding: 6px;
    opacity: 0;
    position: absolute;
    left: 100%;
    margin-left: 1px;
    top: 50%;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
    &:before {
      content: '';
      position: absolute;
      right: 100%;
      top: 50%;
      margin-top: -5px;
      margin-right: -2px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 10px 5px 0;
      border-color: transparent #fff transparent transparent;
    }
  }
  &__link {
    transition: color .2s ease-in-out;
    color: #656970;
    font-size: 16px;
    line-height: 38px;
    height: 38px;
    display: block;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    &:hover {
      color: #fff;
      & + .menu__tip {
        opacity: 1;
      }
    }
  }
  &__item {
    text-align: center;
    opacity: 0;
    transition: transform .3s ease-in-out,
                opacity .3s linear;
    &:nth-child(1) {
      transform: translate(0, -100%);
    }
    &:nth-child(2) {
      transform: translate(0, -200%);
      transition-delay: .05s;
    }
    &:nth-child(3) {
      transform: translate(0, -300%);
      transition-delay: .1s;
    }
    &:nth-child(4) {
      transform: translate(0, -400%);
      transition-delay: .15s;
    }
    &:nth-child(5) {
      transform: translate(0, -500%);
      transition-delay: .2s;
    }
    &:nth-child(6) {
      transform: translate(0, -600%);
      transition-delay: .25s;
    }
  }
}

# Pure css implementation of the concept:
# https://dribbble.com/shots/2446064-Share-Dropdown