5种纯CSS3鼠标滑过按钮动画特效

这是一款使用纯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文件。