<div class="multi-button">
  <button>
    <i class="fas fa-cut"></i>
    <div class="animate-normal ">Cut</div>
  </button>
  <button>
    <i class="fas fa-copy"></i>
    <div class="animate-normal ">Copy</div>
  </button>
  <button>
    <i class="fas fa-paste"></i>
    <div class="animate-normal ">Paste</div>
  </button>
</div>
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,700&display=swap');

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: hsla(228,16%,83%,0.2);
}

.multi-button {
  padding: 8px 10px;
  border-radius: 50px;
  background: #fff;
  border: .5px solid hsla(228,16%,63%,0.4);
  box-shadow: 0 0 10px hsla(228,16%,63%,0.2), 4px 4px 10px hsla(228,16%,63%,0.2);
  cursor: default;
  button {
    border: 0 solid transparent;
    background: transparent;
    padding: 10px 30px;
    margin: 0 -2px;
    color: #273043;
    font-size: 17px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
    outline: none;
    transition: background 0.2s ease-in-out;
    &:first-child {
      border-top-left-radius: 40px;
      border-bottom-left-radius: 40px;
    }
    &:last-child {
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
    }
    div {
      position: absolute;
      top: -43px;
      left: calc(50% - 40px);
      width: 80px;
      font-size: 13px;
      color: #fff;
      background: hsla(221,27%,11%,0.7);
      border-radius: 16px;
      line-height: 30px;
      font-family: 'Raleway', Arial, sans-serif;
      text-align: center;
      font-weight: 500;
      letter-spacing: 1px;
      box-shadow: 0 0 5px hsla(221,27%,21%,0.3), 1px 1px 5px hsla(221,27%,21%,0.2);
      display: none;
      cursor: pointer;
    }
    &:hover {
      background: hsla(228,16%,95%,1);
      div {
        display: block;
        animation: tooltip-animation-normal 0.3s ease-out forwards;
      }
      div.animate-right {
        animation: tooltip-animation-right 0.3s ease-out forwards;
      }
      div.animate-left {
        animation: tooltip-animation-left 0.3s ease-out forwards;
      }
    }
    &:active {
      outline: none;
      background: hsla(228,16%,86%,1);
    }
  }
  
}

@keyframes tooltip-animation-right {
  0% {
    transform: translateX(-75px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes tooltip-animation-left{
  0% {
    transform: translateX(75px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes tooltip-animation-normal{
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
View Compiled
window.onload = () => {
  const buttons = document.querySelectorAll(".multi-button button");
  buttons.forEach((button, index) => {
    button.addEventListener("mouseover", () => {
      if (index > 0) {
        const prevTooltip = buttons[index-1].querySelector("div");
        prevTooltip.classList.remove("animate-right");
        prevTooltip.classList.add("animate-left");
      }
      if (index < buttons.length - 1) {
        const nextTooltip = buttons[index+1].querySelector("div");
        nextTooltip.classList.remove("animate-left");
        nextTooltip.classList.add("animate-right");
      }
    });
  });
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.