演示地址：http://www.htmleaf.com/Demo/201510282718.html

利用方法

HTML构造

html按钮特效30种CSS3动画特效按钮 Python

按钮的HTML构造利用嵌套<div>构造来制作。
这里以第6种效果为例。

<div class=\"大众wrapper-inner-tab-backgrounds-first\"大众> <div class=\公众sim-button button6\公众> <span>Login</span> </div></div>

css样式

.button6{ color: rgba(255,255,255,1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; border: 1px solid rgba(255,255,255,0.5); position: relative;}

.button6 a{ color: rgba(51,51,51,1); text-decoration: none; display: block;}

按钮中的文本采取绝对定位。

.button6 span{ z-index: 2; display: block; position: absolute; width: 100%; height: 100%;}

鼠标滑过期动画的元素是一个::before伪元素，它被设置为绝对定位。
这个效果开始时伪元素的大小为这个按钮的一半大小，透明度为0。
在鼠标滑过的时候，它会被放大到按钮大小，透明度过渡为1。

view sourceprint?

.button6::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; background-color: rgba(255,255,255,0.5); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1);}

.button6:hover::before{ opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1);

}

切图网（qietu.com）是首家专门从事web前端开拓的公司，专注we前端开拓，相应式布局，webapp手机端网页制作，微信html5页面制作，bootstrap布局等，关注用户体验。