<div class="multi-button">
  <button id="cut-btn"><i class="fas fa-cut"></i></button>
  <button id="copy-btn"><i class="fas fa-copy"></i></button>
  <button id="paste-btn"><i class="fas fa-paste"></i></button>
</div>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #232323;
  overflow: hidden;
}

.multi-button {
  padding: 10px;
  border-radius: 50vh;
  box-shadow: 4px 4px 20px 5px rgba(0,0,0,.7), -4px -4px 20px 4px rgba(255,255,255,.2);
  
  button {
    background: none;
    color: whitesmoke;
    border: none;
    letter-spacing: 2px;
    font-size: 1.1rem;
    padding: 15px 50px;
    border-radius: 7px;
    outline: none;
    
    &:hover {
      background: #191919;
      cursor: pointer;
    }
    
    &:disabled {
      cursor: not-allowed;
    }
    
    &:active {
      box-shadow: 4px 4px 20px 5px rgba(0,0,0,.7) inset, -4px -4px 20px 3px rgba(255,255,255,.3) inset;
    }
    
    &:first-child {
      border-top-right-radius: 125px;
      border-bottom-right-radius: 125px;
      border-top-left-radius: 50vh;
      border-bottom-left-radius: 50vh;
    }
    
    &:last-child {
      border-top-left-radius: 125px;
      border-bottom-left-radius: 125px;
      border-top-right-radius: 50vh;
      border-bottom-right-radius: 50vh;
    }
  }
}

.cut {
  position: absolute;
  color: orange;
  z-index: 5;
  opacity: 0;
  transform: scale(0);
}

.copy {
  position: absolute;
  color: #8080ff;
  z-index: 5;
  opacity: 0;
  transform: scale(0);
}

.paste {
  position: absolute;
  color: #00cc99;
  z-index: 5;
  opacity: 0;
  transform: scale(0);
}

.animated {
  animation: motion 3.5s ease-out;
}

@keyframes motion {
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
    transform: scale(1);
  }
  85% {
    transform: rotateY(180deg);
    opacity: 1;
  }
  95% {
    transform: rotateY(360deg) translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: rotateY(360deg) translateY(-10px);
    opacity: 0;
  }
}

$("#cut-btn").click(function() {
  // Création des éléments aléatoire
  var num = Math.round(Math.random() * 15) + 10;
  var array = [];
  for(var i = 0; i < num; i++) {
    var cut = document.createElement("SPAN");
    cut.classList.add("fas");
    cut.classList.add("fa-cut");
    cut.classList.add("cut");
    
    array.push(cut);
    array.forEach(function(item) {
      item.style.top = Math.random() * 100 + "%";
      item.style.left = Math.random() * 100 + "%";
      item.style.fontSize = (Math.random() * 30) + 20 + "px";      
      $("body").append(item);
    })
  }
  
  // Lance l'animation
  // Empèche le click à répétition
  $(this).prop("disabled", true);
  $(".cut").addClass("animated");
  setTimeout(function() {
    // Réactive le click
    // Retire la classe animation pour pouvoir la relancer à nouveau
    $("#cut-btn").prop("disabled", false);
    $(".cut").removeClass("animated");
    $(".cut").detach();
  }, 3500);
})

$("#copy-btn").click(function() {
  // Création des éléments aléatoire
  var num = Math.round(Math.random() * 15) + 10;
  var array = [];
  for(var i = 0; i < num; i++) {
    var copy = document.createElement("SPAN");
    copy.classList.add("fas");
    copy.classList.add("fa-copy");
    copy.classList.add("copy");
    
    array.push(copy);
    array.forEach(function(item) {
      item.style.top = Math.random() * 100 + "%";
      item.style.left = Math.random() * 100 + "%";
      item.style.fontSize = (Math.random() * 30) + 20 + "px";      
      $("body").append(item);
    })
  }
  
  // Lance l'animation
  // Empèche le click à répétition
  $(this).prop("disabled", true);
  $(".copy").addClass("animated");
  setTimeout(function() {
    // Réactive le click
    // Retire la classe animation pour pouvoir la relancer à nouveau
    $("#copy-btn").prop("disabled", false);
    $(".copy").removeClass("animated");
    $(".copy").detach();
  }, 3500);
})

$("#paste-btn").click(function() {
  // Création des éléments aléatoire
  var num = Math.round(Math.random() * 15) + 10;
  var array = [];
  for(var i = 0; i < num; i++) {
    var paste = document.createElement("SPAN");
    paste.classList.add("fas");
    paste.classList.add("fa-paste");
    paste.classList.add("paste");
    
    array.push(paste);
    array.forEach(function(item) {
      item.style.top = Math.random() * 100 + "%";
      item.style.left = Math.random() * 100 + "%";
      item.style.fontSize = (Math.random() * 30) + 20 + "px";      
      $("body").append(item);
    })
  }
  
  // Lance l'animation
  // Empèche le click à répétition
  $(this).prop("disabled", true);
  $(".paste").addClass("animated");
  setTimeout(function() {
    // Réactive le click
    // Retire la classe animation pour pouvoir la relancer à nouveau
    $("#paste-btn").prop("disabled", false);
    $(".paste").removeClass("animated");
    $(".paste").detach();
  }, 3500);
})