<div class="button">Hove Me!</div>

<script>
  if ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("https://codepen.io/airen/pen/ZEpjebX.js");
    const wave = document.querySelector(".button");
    let tick = 0;
    let isRun = false;
    requestAnimationFrame(function raf(now) {
      if (isRun) {
        tick += 1;
        wave.style.setProperty('--animation-tick', tick);
      }
      requestAnimationFrame(raf);
    });
    const play = () => {
      isRun = true
    }
    const stop = () => {
      isRun = false
    }
    wave.addEventListener('mouseover', () => {
      play()
    })
    wave.addEventListener('mouseleave', () => {
      stop()
    })
  }
</script>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;

  font-family: "Exo", Arial, sans-serif;
  background-color: #423232;
  color: #fff;
  place-content: center;
  padding: 10px;
}

.button {
  --button-color: rgba(29, 39, 129, 0.3);
  min-width: 200px;
  min-height: 40px;
  margin: auto;
  font-size: 2rem;
  border-radius: 10rem;
  color: #121212;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 0 6px #eee;
  background-color: #008effc9;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.8);
  padding: 10px 30px;
  background-image: linear-gradient(
    to right,
    #fbc2eb 0%,
    #a6c1ee 51%,
    #fbc2eb 100%
  );
}
.button:hover {
  background-image: paint(wave);
  background-color: #008effc9;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 6px #eee;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

registerPaint(
  "wave",
  class {
    static get inputProperties() {
      return ["--animation-tick", "--button-color"];
    }
    paint(ctx, geom, props) {
      let tick = Number(props.get("--animation-tick"));
      let bgcolor = String(props.get("--button-color"));

      const { width, height } = geom;

      const initY = height * 0.4;
      tick = tick * 2;

      ctx.beginPath();
      ctx.moveTo(0, initY + Math.sin(tick / 20) * 10);
      for (let i = 1; i <= width; i++) {
        ctx.lineTo(i, initY + Math.sin((i + tick) / 20) * 10);
      }
      ctx.lineTo(width, height);
      ctx.lineTo(0, height);
      ctx.lineTo(0, initY + Math.sin(tick / 20) * 10);
      ctx.closePath();

      ctx.fillStyle = `${bgcolor}`;
      ctx.fill();
    }
  }
);