<button class="bhe-18__btn">
  <span class="bhe-18__glow"></span>
  Hover Me
</button>

.bhe-18__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-18__btn {
  position: relative;
  overflow: hidden;
}
.bhe-18__glow {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.28) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translate(-50%, -50%);
}
.bhe-18__btn:hover .bhe-18__glow {
  opacity: 1;
}

document.querySelectorAll(".bhe-18__btn").forEach(function (btn) {
  const glow = btn.querySelector(".bhe-18__glow");
  if (!glow) return;
  btn.addEventListener("mousemove", function (e) {
    const r = btn.getBoundingClientRect();
    glow.style.left = e.clientX - r.left + "px";
    glow.style.top = e.clientY - r.top + "px";
  });
});