Gravity Drop Button

<button class="gdb-btn" id="gdb-btn">Drop Me</button>

.gdb-btn {
  padding: 14px 36px;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.gdb-btn:hover {
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
}

const btn = document.getElementById('gdb-btn');
let vy = 0, y = 0, bouncing = false;
btn.addEventListener('click', function() {
  if (bouncing) return;
  bouncing = true;
  vy = 0; y = 0;
  function step() {
    vy += 0.8;
    y += vy;
    if (y > 120) {
      y = 120;
      vy *= -0.6;
      if (Math.abs(vy) < 1) { y = 0; bouncing = false; btn.style.transform = 'translateY(0)'; return; }
    }
    btn.style.transform = 'translateY(' + y + 'px)';
    requestAnimationFrame(step);
  }
  step();
});