SOURCE

console 命令行工具 X clear

                    
>
console
// setProperty 浏览器可能不支持,请使用babel
document.getElementById('btn').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`);
}
<button id="btn">
  <spna>把你的鼠标移上来试试</spna>
</button>
/* body{
  margin: 50px 0;
  text-align: center;
} */
#btn{
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;
}
  
#btn>span {
  position:relative;
  z-index:2000;
}

#btn::before{
  --size: 0;  

  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, rgba(68,5,247,.8), transparent);
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}

#btn:hover::before {
  --size: 400px;
}