JSFiddle - React, Tailwind, and code Playground

HTML

<button class="button">
  <span>hover</span>
</button>

SCSS

.button {
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
  max-width: 320px;
  border: none;
  outline: none;
  padding: 20px;
  background-color: red;
}

span {
  color: #fff;
}

--size: 0;

.button::before {
  position: absolute;
  content: ' ';
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4405f7, transparent);
  transform: translate(-50%, -50%);
  transition: 0.3s width;
}

.button:hover::before {
  --size: 320;
}

JavaScript

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft;
  const y = e.pageY - e.target.offsetTop;
  e.target.style.setProperty('--x', `${x}px`);
  e.target.style.setProperty('--y', `${y}px`);
}