button Click me

body {
  // https://blog.guilmaindorian.com/centrer-du-contenu-avec-css
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #b9b9d9;

  button {
    font-family: sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #484855;
  }
}

button {
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0;
  border-radius: 10px;
  border: none;
  background-color: #b9b9d9;
  box-shadow: 10px 10px 20px #9d9db8, -10px -10px 20px #d5d5fa;
  cursor: pointer;
}

.animate {
  animation: shadowDeepIn 200ms ease-out forwards,
      shadowDeepOut 200ms 300ms ease-in forwards,
    darkenColor 200ms ease-out forwards,
    darkenColor 200ms 300ms ease-in reverse forwards;
}

@keyframes shadowDeepIn {
  0% {
    box-shadow: 10px 10px 20px #9d9db8, -10px -10px 20px #d5d5fa;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: inset 10px 10px 20px #9d9db8, inset -10px -10px 20px #d5d5fa;
  }
}

@keyframes shadowDeepOut {
  0% {
    box-shadow: inset 10px 10px 20px #9d9db8, inset -10px -10px 20px #d5d5fa;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: 10px 10px 20px #9d9db8, -10px -10px 20px #d5d5fa;
  }
}

@keyframes darkenColor {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

const $button = document.getElementsByTagName("button")[0];

let debounce = false;
$button.addEventListener("click", () => {
  if (debounce) return;
  debounce = true;
  buttonAnimate();
});

const buttonAnimate = () => {
  $button.classList.add("animate");
  setTimeout(() => {
    $button.classList.remove("animate");
    debounce = false;
  }, 700);
};