「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」
本教程将帮助你学习如何使用 HTML 和 CSS 创建渐变按钮动画效果。前面我和大家分享了不同类型按钮动画的设计。其中值得注意的是霓虹灯动画、发光渐变按钮等。
但是，本教程将帮助你了解如何在按钮之间添加渐变动画。 分发是我们在不同地方使用的众多 HTML 元素之一。由于各种原因，几乎所有类型的网站或网页都使用按钮。
但是，按钮越吸引人、越现代，它就会越早吸引用户的注意力。CSS渐变按钮在关注度和专业度方面没有可比性。
渐变按钮动画效果 CSS
纯 CSS 渐变按钮使用多种颜色。这种类型的渐变按钮动画效果用于各种附属程序或任何需要用户注意的链接。
在特定的时间间隔内，可以在背景中看到不同类型的颜色。如果你了解基本的 HTML 和 CSS ，则很容易制作。你还可以借助按钮功能或使用普通的 HTML 元素来创建此类按钮。
在线演示：haiyong.site/anniuxuanti…
希望上面的演示可以帮助你了解这个渐变按钮悬停效果是如何工作的。如果需要，查看全文获得上面的源代码。
由于这是一个非常简单的元素，因此我没有分享任何教程。此按钮未添加任何单击或悬停效果。这个 CSS Gradient Button 将自动运行这个颜色变化过程，持续无穷无尽的时间。
如何创建 CSS 渐变按钮动画
现在是创建此按钮动画的时候了。为此，首先，创建一个 HTML 和 CSS 文件。然后将以下代码添加到该文件中。这里只使用了两行HTML 和一些 CSS。
HTML 代码：
复制以下 HTML 代码并将其添加到你的 HTML 文件中。下面的 HTML 中只使用了一个文本，可以在按钮中找到。如果要更改按钮的文本，可以在此处进行。
<div class="btn">Button Hover
<div class="btn2"></div>
</div>
CSS 代码：
现在是时候在CSS 的帮助下为这个渐变按钮添加颜色和动画了。 复制这些 ECS 并将它们添加到你的 CSS。首先，我使用黑色作为网页的背景颜色。由于使用了黑色，这个按钮的动画可以看得很清楚。
虽然你可以在项目或工作中使用它时更改背景颜色。此按钮的宽度为 300 像素，高度为 100 像素。使用背景线性渐变以 50 度角添加了不同的颜色。
body {
align-items: center;
background: #171717;
display: flex;
width: 100vw;
height: 100vh;
font-family: sans-serif;
justify-content: center;
}
.btn,
.btn2 {
color: rgba(255,255,255,0.9);
border-radius: 50px;
width: 300px;
height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
background-size: 600%;
-webkit-animation: anime 6s linear infinite;
animation: anime 6s linear infinite;
}
.btn2 {
position: absolute;
margin-top: -70px;
z-index: -1;
filter: blur(30px);
opacity: 0.8;
}
@keyframes anime {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-webkit-keyframes anime {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
希望你使用上面的 HTML 和 CSS 代码没有问题。使用这些代码，你可以创建渐变按钮动画效果 CSS。如果你在理解这些代码方面有困难，可以在评论中告诉我。
