CSS3实现按钮的悬浮效果

前几天看到有篇翻译文章，有个大佬（哪位大佬，是真的忘记了）用css变量做了一个按钮的悬浮效果，非常的炫酷，然后我就改成了普通的css3和js实现了。
原理：渐变层原始宽度和高度为0，鼠标经过外部包裹层的时候，渐变层宽度和高度显示，追踪鼠标在按钮内移动的位置，然后渐变层跟随即可！

0、结构

<div class="button">
    <div class="text">buttondiv>/*文字层*/
    <div class="gradual" >div>/*渐变层*/
div>

1、加点样式吧！

.button {
  position: relative;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  min-height: 45px;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 12px 20px 8px;
  transition: all .15s ease,transform .2s ease-in-out;
  color: #fff;
  border-color: #fe1251;
  background-color: #fe1251;
  cursor: pointer;
  justify-content: center;

}
.text {
  position: relative;
  z-index: 2
}

.gradual{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  content: " ";
  display: block;
  background: -webkit-radial-gradient(center,ellipse cover,#402bf2 0,#f6174e 50%);
  transition: width .4s ease-in-out,height .4s ease-in-out;
  transform: translate(-50%,-50%);/*关键*/
  border-radius: 50%;
  z-index: 1;
}
.button:hover .gradual{
  width: 225%;
  height: 810px;
}

结构很简单主要就是button里面包裹两个div一个是文字，另外一个是渐变层

2、追踪鼠标位置

var gradual=document.querySelector('.gradual')
document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX;//鼠标位置x轴
  const y = e.pageY//y轴
}

3 、设置渐变层的位置

gradual.style.setProperty('left', `${ x }px`)
gradual.style.setProperty('top', `${ y }px`)

大功告成！