SOURCE

document.querySelector('.button').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 class="button">
  <span>
    鼠标悬停高光效果按钮演示
  </span>
</button>
<div class="btn">
  渐变按钮
</div>
<div class="autobtn">
  <a href="javascript:;">
    渐变按钮
  </a>
</div>
<div class="highlightbtn">
  <a href="javascript:;">
    高光按钮
  </a>
</div>

body {
  text-align: center;
}

.button {
  margin: auto;
  padding: 1em 2em;
  font-size: 1.2em;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 100px;
  outline: none;
  background: #f72359;
  overflow: hidden;
  position: relative;
  display: inline-block;
  appearance: none;
}

.button span {
  position: relative;
}

.button::before {
  content: '';
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, #4405f7, transparent);
  position: absolute;
  top: var(--y);
  left: var(--x);
  --size: 0;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}

.button:hover::before {
  --size: 400px;
}


/**静止渐变按钮*/

.btn {
  width: 307px;
  margin: 50px auto;
  font-size: 1.2em;
  color: #fff;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  cursor: pointer;
  background-image: linear-gradient(225deg, #8bb4fa, #3e82f7);
}


/**动态渐变按钮*/

.autobtn a {
  width: 307px;
  height: 50px;
  margin: 50px auto;
  font-size: 1.2em;
  color: #fff;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background-image: -webkit-linear-gradient(-10deg, #3254fe, #e71633, #3254fe);
  background-size: 200% 100%;
  display: block;
  animation: masked-animation 4s infinite linear;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0;
  }
}


/**高光按钮*/

.highlightbtn a {
  width: 307px;
  height: 50px;
  margin: auto;
  font-size: 1.2em;
  color: #fff;
  line-height: 50px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 25px;
  background: #06c;
  overflow: hidden;
  position: relative;
  display: block;
}

.highlightbtn a:before {
  content: '';
  width: 40px;
  height: 100%;
  background-color: #00FFAA;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .4)50%, rgba(255, 255, 255, 0)100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .4)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .4)50%, rgba(255, 255, 255, 0)100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .4)50%, rgba(255, 255, 255, 0)100%);
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  -webkit-animation: ani 1.5s infinite;
  -o-animation: ani 1.5s infinite;
  animation: ani 1.5s infinite;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
}

@keyframes ani {
  0% {
    left: -80px;
  }
  100% {
    left: 300px;
  }
}

@-webkit-keyframes ani {
  0% {
    left: -20px;
  }
  100% {
    left：280px;
  }
}