纯css3鼠标经过按钮背景填充动画特效

纯CSS3做的，鼠标放入之后背景发生变化填充的特效，比较实用，而且书写简单。您只需要用一个a标签和一个css类，然后写一些css样式即可。例如：

HTML文件：

<a class="btn-8" href="http://www.zhanzhangai.com/e/" target="_blank">站长爱特效</a>

CSS样式：

.btn-8 {
  color: #5177a7;
}
.btn-8:before, .btn-8:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 0;
  background: #1e395b;
}
.btn-8:after {
  top: auto;
  bottom: 0;
}
.btn-8:hover {
  color: #ccd7e5;
}
.btn-8:hover:before, .btn-8:hover:after {
  height: 40px;
}
.btn-8:active {
  background: #325f98;
}