鼠标动效html,5种纯CSS3鼠标hover按钮动画效果

这是一款鼠标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代码请参考下载文件。