<section>
  <div class="btn">
    <div class="btn-background">
      <span class="btn-mouseBall"></span>
    </div>
    <div class="btn-content">Hover me</div>
  </div>
</section>

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

section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: "Righteous", cursive;
  letter-spacing: 1px;
}
.btn {
  background: transparent;
  position: relative;
  padding: 3em;
  cursor: default;
  font-size: 2em;
  &-background {
    pointer-events: none;
    filter: contrast(20);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% - 3em);
    width: calc(100% - 3em);
    background-color: #fff;
    overflow: hidden;
    &::after {
      margin: 1.5em;
      content: "";
      overflow: visible;
      filter: blur(0.5em);
      display: block;
      background: #000;
      position: absolute;
      width: calc(100% - 3em);
      height: calc(100% - 3em);
      z-index: 1;
    }
  }
  .btn-mouseBall {
    font-size: 1em;
    top: 0%;
    left: 0%;
    filter: blur(0.5em);
    position: absolute;
    background: #fff;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    transition: opacity 0.5s;
    z-index: 5;
    opacity: 1 !important;
    animation: topRight 10s linear infinite, topLeft 12s linear infinite,
      botRight 11s linear infinite, botLeft 17s linear infinite,
      rotate 18s ease-in-out infinite alternate;
  }
  &-content {
    pointer-events: none;

    padding: 1.5em;
    position: relative;
    background-color: transparent;
    color: #fff;
    z-index: 0;
  }
}

@keyframes topRight {
  0% {
    border-top-right-radius: 50%;
  }
  25% {
    border-top-right-radius: 17%;
  }
  50% {
    border-top-right-radius: 43%;
  }
  75% {
    border-top-right-radius: 27%;
  }
  100% {
    border-top-right-radius: 50%;
  }
}
@keyframes topleft {
  0% {
    border-top-left-radius: 27%;
  }
  25% {
    border-top-left-radius: 50%;
  }
  50% {
    border-top-left-radius: 15%;
  }
  100% {
    border-top-left-radius: 27%;
  }
}
@keyframes botRight {
  0% {
    border-bottom-right-radius: 50%;
  }
  25% {
    border-bottom-right-radius: 20%;
  }
  50% {
    border-bottom-right-radius: 25%;
  }
  75% {
    border-bottom-right-radius: 18%;
  }
  100% {
    border-bottom-right-radius: 50%;
  }
}
@keyframes botLeft {
  0% {
    border-bottom-left-radius: 12%;
  }
  25% {
    border-bottom-left-radius: 40%;
  }
  50% {
    border-bottom-left-radius: 50%;
  }
  75% {
    border-bottom-left-radius: 45%;
  }
  100% {
    border-bottom-left-radius: 12%;
  }
}
@keyframes rotate {
  0% {
    transform: translate(calc(-50% - 1.5em), calc(-50% - 1.5em)) rotate(0deg);
  }
  100% {
    transform: translate(calc(-50% - 1.5em), calc(-50% - 1.5em)) rotate(1080deg);
  }
}

document.onload = ready();
function ready() {
  document.querySelector(".btn").addEventListener("mousemove", moveBall);

  document.querySelector(".btn-content").addEventListener("mouseenter", () => {
    document.querySelector(".btn-mouseBall").style.opacity = "1";
  });
  document.querySelector(".btn-content").addEventListener("mouseleave", () => {
    document.querySelector(".btn-mouseBall").style.opacity = "0";
  });
}
function moveBall(event) {
  var btn = document.querySelector(".btn");
  document.querySelector(".btn-mouseBall").style.top =
    event.y - btn.getBoundingClientRect().y + "px";
  document.querySelector(".btn-mouseBall").style.left =
    event.x - btn.getBoundingClientRect().x + "px";
}