<div class="vcv-container">
  <div class="vcv-button-container" data-state="alive">
    <button class="vcv-btn" data-hover="ಠ＿ಠ">｡◕ ‿ ◕｡</button>
    <span class="vcv-ghost-btn">ಥ﹏ಥ</span>
    <div class="vcv-tomb-stone-container">
      <button class="vcv-tomb-stone" data-state="dead">RIP Button</button>
      <div class="vcv-zombie-container">
        <button class="vcv-zombie-btn" title="Braaaains">ʘ益ʘ</button>
      </div>
    </div>
  </div>
</div>

@button-color: rgba(255, 255, 255, .7);
@button-zombie-color: #8dad9c;
@button-border: 2px solid @button-color;
@button-padding: 16px 43px;
@button-die-time: 1.3s;
@ghost-fly-time: 1.8s;

*,
*::before,
*::after {
  box-sizing: border-box;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: @button-padding;
  color: @button-color;
  background: transparent;
  border: @button-border;
  border-radius: 30px;
  line-height: 1;
  outline: none;
}

.vcv-container {
  .flex-center;
  height: 100vh;
  background: #222;
}

.vcv-button-container {
  display: inline-block;
  position: relative;
  perspective: 1000px;
}

.vcv-button-container[data-state="dead"] {
  .vcv-btn {
    transform: rotateX(90deg);
    opacity: 0;
  }
  .vcv-ghost-btn {
    visibility: visible;
    opacity: 0;
    top: -130px;
    bottom: 130px;
  }
  .vcv-tomb-stone {
    bottom: 0;
  }
}

.vcv-btn {
  position: relative;
  .button;
  cursor: pointer;
  transition: 
    transform @button-die-time ease-in .4s,
    opacity .2s ease-in 1.5s;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  z-index: 1;
  
  &:hover {
    color: transparent;
    &::before {
      content: attr(data-hover);
      position: absolute;
      color: @button-color;
      margin-left: 17px;
      font-size: 18px;
    }
  }
}

.vcv-btn-dead {
  padding: 16px 59px;
  &:hover::before {
    margin: 0;
    font-size: initial;
  }
}

.vcv-ghost-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .flex-center;
  .button;
  padding: 0;
  visibility: hidden;
  opacity: 1;
  transition: top @ghost-fly-time ease-in-out .01s,
              bottom @ghost-fly-time ease-in-out .01s,
              opacity @ghost-fly-time ease-in-out .01s;
}

.vcv-tomb-stone-container {
  position: absolute;
  width: 100%;
  height: 125px;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  outline: none;
}

.vcv-tomb-stone {
  display: none;
  position: absolute;
  bottom: -125px;
  background: #666;
  width: 100%;
  height: 100px;
  .flex-center;
  border: none;
  cursor: pointer;
  transition: bottom .4s ease-in 2.2s;
  font-family: 'Creepster', cursive;
  font-size: 20px;

  &::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 0; 
    width: 100%;
    height: 50%;
    background: #666;
    border-radius: 50%;
    cursor: pointer;
  }
}

.vcv-tomb-stone[data-state="raise"] {
  + .vcv-zombie-container {
    animation: zombie-btn-raise 2s ease-in-out forwards;
  }
}

.vcv-zombie-container {
  position: absolute;
  left: 3px;
  width: 96%;
  bottom: -54px;
}

.vcv-zombie-btn {
  position: relative;
  display: block;
  width: 100%;
  .button;
  border-radius: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 16px 37px;
  color: #666;
  border-color: @button-zombie-color;
  background: @button-zombie-color;
  border-bottom: none;
  cursor: pointer;
  
  &::before {
    background: linear-gradient(-45deg, transparent 10px, @button-zombie-color 0),
      linear-gradient(45deg, transparent 10px, @button-zombie-color 0);
    background-position: 0%, 0%;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 11px 13px;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    top: 48px;
    left: -2px;
    right: -2px;
  }
}

@keyframes zombie-btn-raise {
  0% {
    transform: rotate(0deg);
    transform-origin: left bottom;
  }
  33% {
    transform: rotate(10deg);
    transform-origin: right top;
  }
  66% {
    transform: rotate(-10deg);
  }
  100% {
    bottom: 8px;
  }
}

const btn = document.querySelector('.vcv-button-container');
const tombStone = document.querySelector('.vcv-tomb-stone');
const zombieBtn = document.querySelector('.vcv-zombie-btn');


//vcv-zombie-btn
function handleBtnClick () {
  if (this.dataset.state === 'alive') {
    this.dataset.state = 'dead';
    const dead = '×﹏×';
    const btn = this.querySelector('.vcv-btn');
    btn.classList.add('vcv-btn-dead');
    btn.innerText = dead;
    btn.dataset.hover = dead;
  }
};

function handleTombClick () {
  if (this.dataset.state === 'dead') {
    this.dataset.state = 'raise';
  }
}

function handleZombieClick () {
  this.classList.add('shake', 'animated');
  setTimeout(() => {
    this.classList.remove('shake', 'animated');
  }, 1000)
}

btn.addEventListener('click', handleBtnClick);
tombStone.addEventListener('click', handleTombClick);
zombieBtn.addEventListener('click', handleZombieClick);