效果预览

click here ~

html

<body>
    <a href="#">BUTTON</a>
</body>

css

<style>
    body{
  margin: 0; /*外边距*/
  padding: 0; /*内边距*/
  background-color: #000; /*背景颜色*/
}
a{
  position: absolute; /*绝对对位*/
  top: 50%; /*距上部*/
  left: 50%; 
  transform: translate(-50%,-50%); /*移动，根据X,Y轴*/
  width: 400px; /*宽*/
  height: 120px; /*高*/
  text-align: center; /*字体水平居中*/
  font-size: 45px; /*字体大小*/
  line-height: 120px; /*行高*/
  color: #fff;
  text-transform: uppercase; /*字体大写*/
  text-decoration: none; /*字体增加装饰：去除下划线*/
  font-family: sans-serif; /*非衬线体*/
  box-sizing: border-box; /*盒模型大小规则*/
  background: linear-gradient(
    90deg,#03a9f4, #f441a5, #ffeb3b, 
  #03a9f4, #f441a5, #ffeb3b, #03a9f4); /*渐变背景*/
  border-radius: 60px; /*边框圆角*/
  background-size: 400%; /*背景大小*/
  z-index: 1; /*层叠定位*/
}
a:hover{
  animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
}
@keyframes animate{
  0%{
    background-position: 0%; /*修改背景定位，实现渐变色炫光*/
  }
  50%{
    background-position: 100%;
  }
  100%{
    background-position: 0%;
  }
}
a::before{ /*之前添加*/
  content: ''; /*内容*/
  position: absolute; /*绝对定位*/
  top:-5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
  left: -5px;
  right: -5px;
  bottom: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
  z-index: -1; 
  background: linear-gradient(
    90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, 
  #f441a5, #ffeb3b, #03a9f4);
  border-radius: 40px;
  background-size: 400%;
  filter: blur(20px); /*过渡：模糊*/
  opacity: 0; /*透明度*/
  transition: 1s; /*过渡时间*/
}
a:hover::before{
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite; /*注意动画名称统一*/
}
</style>

Ex - ploooosion！