这是一款鼠标hover按钮动画特效。该特效共有5种hover动画效果，它们在结构布局上使用flex来进行布局，并通过css transition来实现动画效果。
使用方法
HTML结构
该按钮特效使用元素来来作为按钮。
Learn More
CSS样式
按钮的通用样式如下：
.effect {
display: inline-block;
position: relative;
text-decoration: none;
color: #fff;
text-transform: capitalize;
font-family: 'Roboto', sans-serif;
font-size: 18px;
padding: 20px 0px;
width: 150px;
border-radius: 6px;
overflow: hidden;
}
每一种按钮hover动画效果通过effect-*来表示，第一种按钮hover动画效果的CSS样式如下：
.effect.effect-1 {
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-1:before {
content: "\f178";
font-family: FontAwesome;
font-size: 15px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
right: 0;
top: 0;
opacity: 0;
height: 100%;
width: 40px;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.effect.effect-1:hover {
text-indent: -20px;
}
.effect.effect-1:hover:before {
opacity: 1;
text-indent: 0px;
}
其余4种按钮hover效果的CSS代码请参考下载文件。
