营销型机械网站网络营销课程培训课程

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