body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  color: #696172;
  font-family: system-ui;
  font-size: 175%;
}

.effect3d {
  animation-name: effect3d;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.reverse {
  animation-direction: reverse;
}
@keyframes effect3d {
  to {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
      0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
      0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
      0 20px 20px rgba(0, 0, 0, 0.15);
  }
}

const button = document.querySelector("button");
const demoEl = document.querySelector(".effect3d");
button.addEventListener("click", e => {
  demoEl.classList.remove('effect3d');
  setTimeout(() => {
    demoEl.classList.add('effect3d');
  }, 0);
  demoEl.classList.toggle('reverse');
});