我正在参加「掘金·启航计划」
以下是我们将构建的内容：
HTML
让我们从按钮的 HTML开始
<body>
<button class="button">Hover Me</button>
</body>
很简单。我们有一个带有类按钮的按钮。我们将使用 CSS 执行其余的魔术。
CSS
此步骤是完全可选的。但是我们会为 body 元素添加 100vh 的最小高度，并使用 CSS 网格将内容在屏幕上垂直和水平居中，以便我们可以更好地看到我们的按钮。
body {
height: 100vh;
background: #000;
display: grid;
place-items: center;
}
接下来，我们将开始设计我们的按钮。
这里没什么特别的，我们为按钮添加了一些基本样式。我们制作了border-radius: 50px; 这样按钮的角就会变圆。此外，我们还添加了 position: relative; 这样我们就可以将按钮发光效果绝对定位到按钮上。
.button {
position: relative;
height: 60px;
width: 200px;
margin: 0 35px;
border-radius: 50px;
border: none;
outline: none;
background: #000;
color: #fff;
font-size: 20px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
}
我们将在按钮上使用 :before 伪元素为我们的按钮添加发光效果。因此，我们将其绝对定位到按钮。我们还将在每一侧添加-5px，以便发光效果将在每侧按钮之外5px。
这里需要注意的最重要的事情是，我们添加了 filter: blur(20px); 给辉光一个20px的模糊效果，我们给了不透明度：0；以便默认隐藏发光效果。此外，我们还添加了过渡：不透明度 0.5s；使发光效果平滑地出现和消失。
背景：继承；用于在悬停时从按钮继承渐变背景颜色。
.button:before {
content: '';
position: absolute;
background: inherit;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50px;
filter: blur(20px);
opacity: 0;
transition: opacity 0.5s;
}
现在有趣的部分是，当用户将鼠标悬停在按钮上时，我们将使用 :hover 伪选择器为按钮添加样式。
在这里，我们添加了一个线性渐变作为按钮背景，具有 4 种不同颜色，方向为 90 度。我们制作了 background-size: 400%; 这样在动画进行时，每个渐变颜色将占据按钮背景的 100% 宽度。我们还添加了一个 z-index: 1; 这样按钮文本将位于发光效果之上。最后，我们添加了动画：glow 8s 线性无限；悬停时为按钮提供无限发光效果。我们将在下一步定义动画发光。
就这样，我们还添加了不透明度：1；和z-index：-1；当按钮悬停时，到按钮的 :before 伪元素。这将使发光可见，并在按钮悬停时使按钮文本位于发光顶部。
.button:hover {
background: linear-gradient(90deg, #03a9fa, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
z-index: 1;
animation: glow 8s linear infinite;
}
.button:hover:before {
opacity: 1;
z-index: -1;
}
最后，我们将添加发光关键帧动画。
在这里，我们将 background-position: 0%; 在动画和背景位置的 0% 处：400%；以 100% 逐渐改变按钮的背景位置。这结合我们在上一步中定义的动画持续时间为 8 秒，将使按钮背景位置平滑变化，并使每个渐变颜色从侧面出现和消失。
@keyframes glow {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
总结
就是这样，通过几个简单的步骤，我们创建了一个发光的按钮。您可以使用动画的颜色、背景大小和持续时间来获得不同的结果。
