CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
本篇，推荐给你几个按钮，先看一下图片
本例图片
案例分析
这是一个系列的按钮，它们具有共同的特点：
底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。
鼠标hover效果都是一样的：背景色位移或变化。
本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。大家可以自行摸索一下，或者下载本文代码。举一反三的本事，我想大家都是具备的。
布局代码
<button class="base">多彩渐变按钮</button>基础样式
:root{--main-bg-color: #000;--color:#000;--hover-color:#993399;
}
button{margin: 0.3em;outline: 0;border: none;
}
.base{position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */font-family: "微软雅黑", sans-serif;font-size: 1.5rem; line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ font-weight:700;color: var(--color); /* 文字颜色为预定义的前景色 */cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */user-select: none; /* 让用户不能选择按钮上的文字 */white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */transition: all .5s; /* 按钮响应动画效果的持续时间 */margin: 1.5rem 2rem;
}按钮样式
那么我们先来给它两个层：
.gb-bordered { position: relative;border: 4px solid transparent;background-clip: padding-box;transition: .5s all;border-radius: 2rem;
}
.gb-bordered:after {transition: .5s all;position: absolute;top: -4px;left: -4px;right: -4px;bottom: -4px;content: '';z-index: -1;border-radius: 2rem;background-size: 200% 100%;background-position: 0% 0;background-image: linear-gradient(135deg, #f68918 0%, #f68918 31%, #ae3e9f 31%, #ae3e9f 42%, #d2645c 42%, #d2645c 49%, #8a19e3 49%, #8a19e3 100%);
}这部分写完了，别忘了给html结构增加新的类名。
<button class="base gb-bordered">多彩渐变按钮</button>
悬浮动画
下面，我们给它的背景色增加一个位移：
.gb-bordered:hover:after{ background-position: 100% 0; }
看起来差不多了，还差一个前景色的变化，我们要把按钮上的白色变成渐变色，而文字变成白色的：
.hover-fill {transition: .6s all;
}
.hover-fill:hover {background-color: transparent;color: white;
}然后，别忘了修改html结构：
<button class="base gb-bordered">多彩渐变按钮</button>按钮完成，看看效果：
大功告成
有了这个按钮的思路，你可以随便修改背景色啊，位移方向啊，就可以做出很多不同样子的按钮了。所以，大家加油摸索吧！
点这里可以下载源文件
希望大家喜欢！别忘了帮我点赞加收藏哦~
本专栏其他文章：
CSS技巧专栏：一日一例1.会讨好的热情按钮
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
CSS技巧专栏：一日一例 4.纯CSS实现两款流光溢彩的酷炫按钮特效
CSS技巧专栏：一日一例 5-纯CSS实现背景色从四周向中心填充的按钮特效
CSS技巧专栏：一日一例 6 - 纯CSS实现粉红色跳出来的立体按钮特效
CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效
CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效
CSS技巧专栏：一日一例 9 -纯CSS实现按钮边框依次填充特效
CSS技巧专栏：一日一例 10 -纯CSS实现表爱心的小可爱按钮特效
