<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:1em;
  &-background{
    filter: contrast(20);
    position:absolute;
    top:0;
    left:0; 
    height:100%;
    width:100%;
    background-color:white;
    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);
    }
  }
  .btn-mouseBall{
    filter:blur(0.5em);
    position:absolute;
    transform:translate(-50%,-50%);
    transition:0.1s;
    background:#000;
    width:1.5em;
    height:1.5em;
    border-radius:50%;
    transition: opacity 0.5s;
  }
  &-content{
    padding:1.5em;
    position:relative;
    background-color:transparent;
    color:#fff;
  }
}
View Compiled
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";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.