关于如何为您的网站增添活力的快速指南
大多数按钮都很无聊。实心、标准边框，其中大部分未正确对齐。在这种情况下，让我们学习如何创建带有动画边框和文本的渐变颜色按钮！一个CSS属性将处理所有动画。
首先，让我们从一个带有悬停功能的基本轮廓按钮开始，可以这样创建：
<a href="/" title="Hello button" class="btn">Hello</a>
.btn {
border: 2px solid #4CAF50;
background-color: transparent;
color: #4CAF50;
padding: 10px 28px;
font-size: var(--f-m);
cursor: pointer;
transition: 256ms all;
border-radius: 20px;}.btn:hover {
background-color: #4CAF50;
color: #fff;}渐变按钮和文本
更进一步 - 添加渐变边框和文本。
为了实现这一点，我们需要做几件事：
- 用 div 包裹我们的按钮并将背景设置为我们的主体颜色
- 添加伪元素以创建边框
- 最后，我们需要添加三个 CSS 属性：
<a class="btn" href="/" title="Hello">Hello</a>
.btn {
display: block;
width: 150px;
background: linear-gradient(90deg, #FFFF00 6%, #FFA500 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
text-align: center;
padding: 13px 20px;
color: #fff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255,255,255,0.001);
transition: 256ms all;
position: relative;
cursor: pointer;}.btn:before {
background: rgb(24,24,24);
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;}.btn:after {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
background: linear-gradient(90deg, #FFFF00 6%, #FFA500 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
transition: 256ms all;
z-index: -1;}你好惊人的！您已经创建了一个带有渐变文本的渐变边框按钮！现在我们将通过额外的 CSS 将其变为现实。
在 CSS 中，我们不能过渡渐变。使用 CSS 看到流畅的动画效果会很棒：
.gradient {
background-image: linear-gradient(red, blue);
transition: background-image 0.5s linear;}.gradient:hover {
background-image: linear-gradient(green, orange);}但它不会起作用。它立即更改为另一个，无需转换。有一些技巧可以做到这一点，但我最喜欢的是为背景位置设置动画。
首先，我们需要为按钮添加两个属性：
然后悬停：
在这种情况下，我添加了一个以白色开头的渐变。它增强了动画边框的印象。
.btn {
display: block;
width: 150px;
background: linear-gradient(90deg,#ffffff 3%,#ffffff 47%,#FFFF00 53%,#FFA500 72%,#F14444 77%,#D53567 88%,#9A109A 97%);
background-size: 200% 100%;
background-position: left center;
text-align: center;
padding: 13px 20px;
color: #fff;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255,255,255,0.001);
transition: 256ms all;
position: relative;
cursor: pointer;}.btn:before {
content: '';
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
background: linear-gradient(90deg,#ffffff 3%,#ffffff 47%,#FFFF00 53%,#FFA500 72%,#F14444 77%,#D53567 88%,#9A109A 97%);
transition: 256ms all;
z-index: -1;
background-size: 200% 100%;
background-position: left center;}.btn:after {
background: rgb(24,24,24);
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;}.btn,
.btn:before {
background-position: right center;}<a class="btn" href="/" title="Hello">Hello</a>
TAGS
CSS
CSS
纯
纯
动画渐变颜色按钮
动画渐变颜色按钮
比你想象的更容易
比你想象的更容易
