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.5r
