结构

我们用一个div元素作为按钮，然后给它编写样式

<div>请把鼠标放上去</div>

基础样式实现

我们先给div元素设置宽高且给一个固定定位，通过控制其top值和left值移动，在使用CSS的translate属性实现页面垂直水平居中的效果，在通过设置行高对等元素的高实现里面的文字垂直居中，通过text-align: center实现水平居中，在设置好字体大小和颜色，最后让通过cursor: pointer属性实现鼠标移动上去是小手的形状，然用border-radius属性设置为高度的一半，将盒子设置为椭圆形状，按钮的样式基本实现了

    div {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            font-size: 24px;
            color: #fff;
            border-radius: 35px;
            cursor: pointer;
            user-select: none;
        }

渐变色实现

通过CSS背景属性linear-gradient通过它实现渐变色的效果，这个属性在设置颜色的时候，最后一个颜色必须和第一个颜色是一样的，否则会出现断色的情况，最后给背景颜色一个大小，是当前按钮的300%，这样便于操作流光的效果

    div {
            background: linear-gradient(90deg, #77bfe0, #945a7b, #b3ab6a, #77bfe0);
            background-size: 300%;
        }

流光效果实现

通过CSS动画的方式实现背景的移动，我们设置了按钮背景是300%,我们使用动画操作背景移动，从背景的起始位置移动到终止位置，这样配合上渐变色就可以实现流光效果

  @keyframes flow {
          0%{
              background-position: 0 0;
          }
            100% {
                background-position: -300% 0;
            }
        }

当鼠标放上按钮时，我们无限循环执行流光效果动画

     div:hover {
            box-shadow: 0 0 10px 0 #77bfe0;
            animation: flow 2s linear infinite;
        }

代码已放码上掘金！

CSS实现流光按钮

结构

基础样式实现

渐变色实现

流光效果实现