<button>This is shiny!</button>

:root {
  /* these are used in JS as well! */
  --bg-color: rgba(46, 161, 182, 0.25);
  --ripple-color: #2ea1b6;
}

/* just for demo purposes... */
body {
  background: linear-gradient(180deg, #040f11 0%, #162b30 100%);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  background-color: var(--bg-color);
  color: #dcf3ff;
  border: 1px solid #6e92a0;
  padding: 12px;
}

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

button.addEventListener("mousemove", (e) => {
  const rect = button.getBoundingClientRect();
  const x = ((e.clientX - rect.left) / button.clientWidth) * 100;
  const y = ((e.clientY - rect.top) / button.clientHeight) * 100;

  button.style.background = `radial-gradient(circle closest-corner 
    at ${x}% ${y}%,
    var(--ripple-color), var(--bg-color))`;
});

button.addEventListener("mouseleave", (event) => {
  button.style.removeProperty("background");
});