<!--BEGIN :: Section-->
<section class="section-wrapper">
  
  <!-- BEGIN :: Floating Action Button -->
  <div class="floating-action-button">
    
    <!-- BEGIN :: Floating Button -->
    <div class="share-btn">
      <ion-icon id="share-icon" name="share-social"></ion-icon>
      <ion-icon id="close-icon" name="close-sharp"></ion-icon>
    </div>
    <!-- END :: Floating Button -->
    
    <!-- BEGIN :: Expand Section -->
    <ul>
      <li>
        <ion-icon name="logo-twitter"></ion-icon>
      </li>
      <li>
        <ion-icon name="logo-facebook"></ion-icon>
      </li>
      <li>
        <ion-icon name="logo-whatsapp"></ion-icon>
      </li>
      <li>
        <ion-icon name="send-sharp"></ion-icon>
      </li>
      <li>
        <ion-icon name="logo-instagram"></ion-icon>
      </li>
    </ul>
    <!-- END :: Expand Section -->
    
  </div>
  <!-- END :: Floating Action Button -->
  
</section>
<!--END :: Section -->

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.section-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #abc6e3;
  .floating-action-button {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(45deg);
    .share-btn {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: #e91e63;
      border-radius: 10px;
      box-shadow: 0px 2px 17px -1px rgba(0,0,0,0.3);
      z-index: 1000;
      #share-icon{
        display: block;
      }
      #close-icon {
        display: none;
      }
    }
    .share-btn.active {
      #share-icon{
        display: none;
      }
      #close-icon {
        display: block;
      }
    }
    ul {
      position: relative;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f7f7f7;
        color: black;
        list-style-type: none;
        transform: scale(0.95);
        transition: .5s;
        border-radius: 10px;
      }
    }
    ul.active {
      li:hover{
       background-color: #FFCDAB;
      }
      li:nth-child(1) {
        top: 100%;
        left: 100%;
        transition-delay: 0s;
      }
      li:nth-child(2) {
        top: 100%;
        left: 0%;
        transition-delay: 0.2s;
      }
      li:nth-child(3) {
        top: 100%;
        left: -100%;
        transition-delay: 0.4s;
      }
       li:nth-child(4) {
        top: 0%;
        left: -100%;
        transition-delay: 0.6s;
      }
       li:nth-child(5) {
        top: -100%;
        left: -100%;
        transition-delay: 0.8s;
      }
    }
  }
  ion-icon {
    font-size: 18px;
    transform: rotate(-45deg);
  }
}
.hide {
  display: none;
}
.show {
  display: block;
}

$(document).ready(function() {
  $(".share-btn").click(function(){
    $(".share-btn").toggleClass("active")
    $("ul").toggleClass("active")
   })
})