.multi-button
  .button-item.button-item--cut
    i.icon.fas.fa-cut
    a.button.cut Cut
  .button-item.button-item--copy
    i.icon.fas.fa-copy
    a.button.copy Copy
  .button-item.button-item--paste
    i.icon.fas.fa-paste
    a.button.paste Paste

$COLOR_GRAY: #E5E5E5;
$COLOR_BLACK: #000;

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: $COLOR_BLACK;
}

.multi-button {
		position: relative;
		width: 396px;
		height: 50px;
		color: $COLOR_GRAY;
		background: $COLOR_BLACK;
		margin: 0;
		padding: 10px 35px;
		border-top: 1px solid $COLOR_GRAY;
		border-bottom: 1px solid $COLOR_GRAY;
}

.button {
  position: absolute;
  top: -5px;
  left: -42px;
  width: 110px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  margin: 0;
  font-weight: bold;
  font-size: 20px;
  color: $COLOR_BLACK;
  background: $COLOR_GRAY;
  transition: 0.8s;
  &:active {
    background-color: #fff;
    color: $COLOR_BLACK;
  }
}

.button-item {
  position: absolute;
  top: 20px;
  transform-origin: center;
  -moz-transform-origin: center;
  -webkit-transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  cursor: pointer;
  &:hover {
    .icon {
					transform: translateX(-80px);
      transition: 0.8s;
    }
    .button {
      top: -5px;
      left: -42px;
      opacity: 1;
      transition: 0.8s;
      transform: scale(1);
    }
  }
  &--cut {
    left: 80px;
  }
  &--copy {
    left: 210px;
  }
  &--paste {
    left: 346px;
  }
}

.icon {
	position: absolute;
  width: 30px;
  height: 30px;
  font-size: 30px;
  transform: scale(1);
  transition: 0.8s;
}