按钮图标
纯CSS3鼠标滑过按钮动画特效
PetitQ
这是一款使用纯 CSS3 制作的炫酷鼠标滑过按钮动画特效。这组按钮特效共 5 种效果，分别是按钮边框动画，上下边框动画，浮雕效果，流光效果和光波效果。这 5 种按钮鼠标滑过特效不仅效果酷，而且代码简单，非常实用。
HTML 结构
在第一种按钮鼠标滑过特效中，使用的是 SVG 线条动画来制作按钮的边框动画。它的 HTML 结构如下：
也想出现在这里？联系我们吧
<a href="#" class="btn btn-1">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
Hover
</a>
其它几种效果的 HTML 结构都是基本相同的。
<a href="#" class="btn btn-2">Hover</a>
<a href="#" class="btn btn-3">Hover</a>
<a href="#" class="btn btn-4"><span>Hover</span></a>
<a href="#" class="btn btn-5">Hover</a>
CSS 样式
首先为按钮和它的父容器设置一些通用的 CSS 样式。
.buttons {
display: table;
height: 100%;
width: 100%;
}.container {
display: table-cell;
padding: 1em;
text-align: center;
vertical-align: middle;
}.btn {
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
margin: 0 auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
}.btn:hover {
text-decoration: none;
}
第一种按钮鼠标滑过效果是使用 CSS 来驱动 SVG 进行动画，IE10 及以下的浏览器不支持第一种特效。关于 SVG 动画可以参考这里。
.btn-1 {
background: #e02c26;
font-weight: 100;
}.btn-1 svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}.btn-1 rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 422, 0;
}.btn-1:hover {
background: rgba(225, 51, 45, 0);
font-weight: 900;
letter-spacing: 1px;
}.btn-1:hover rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
其它几种鼠标滑过按钮特效的 CSS 样式也十分简单，具体请参考下载文件的 styles.css 文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
