今天来分享很不错的CSS3按钮动画，这款CSS3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改CSS代码随意改变自己喜欢的颜色样式。

让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。

HTML代码：

XML/HTML Code复制内容到剪贴板 <divclass="button01"> <ahref="#">Download</a> <pclass="top">clicktobegin</p> <pclass="bottom">1.2MB.zip</p> </div>

CSS代码：

CSS Code复制内容到剪贴板 .button01{ width:200px; margin:50pxauto20pxauto; } .button01a{ display:block; height:50px; width:200px; /*TYPE*/ color:white; font:17px/50pxHelvetica,Verdana,sans-serif; text-decoration:none; text-align:center; text-transform:uppercase; /*GRADIENT*/ background:#00b7ea;/*Oldbrowsers*/ background:-moz-linear-gradient(top,#00b7ea0%,#009ec3100%);/*FF3.6+*/ background:-webkit-gradient(linear,lefttop,leftbottombottom,color-stop(0%,#00b7ea),color-stop(100%,#009ec3));/*Chrome,Safari4+*/ background:-webkit-linear-gradient(top,#00b7ea0%,#009ec3100%);/*Chrome10+,Safari5.1+*/ background:-o-linear-gradient(top,#00b7ea0%,#009ec3100%);/*Opera11.10+*/ background:-ms-linear-gradient(top,#00b7ea0%,#009ec3100%);/*IE10+*/ background:linear-gradient(top,#00b7ea0%,#009ec3100%);/*W3C*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea',endColorstr='#009ec3',GradientType=0);/*IE6-9*/ } .button01a,p{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:2px2px8pxrgba(0,0,0,0.2); -moz-box-shadow:2px2px8pxrgba(0,0,0,0.2); box-shadow:2px2px8pxrgba(0,0,0,0.2); } p{ background:#222; display:block; height:40px; width:180px; margin:-50px0010px; /*TYPE*/ text-align:center; font:12px/45pxHelvetica,Verdana,sans-serif; color:#fff; /*POSITION*/ position:absolute; z-index:-1; /*TRANSITION*/ -webkit-transition:margin0.5sease; -moz-transition:margin0.5sease; -o-transition:margin0.5sease; -ms-transition:margin0.5sease; transition:margin0.5sease; } /*HOVER*/ .button01:hover.bottombottom{ margin:-10px0010px; } .button01:hover.top{ margin:-80px0010px; line-height:35px; } /*ACTIVE*/ .button01a:active{ background:#00b7ea;/*Oldbrowsers*/ background:-moz-linear-gradient(top,#00b7ea36%,#009ec3100%);/*FF3.6+*/ background:-webkit-gradient(linear,lefttop,leftbottombottom,color-stop(36%,#00b7ea),color-stop(100%,#009ec3));/*Chrome,Safari4+*/ background:-webkit-linear-gradient(top,#00b7ea36%,#009ec3100%);/*Chrome10+,Safari5.1+*/ background:-o-linear-gradient(top,#00b7ea36%,#009ec3100%);/*Opera11.10+*/ background:-ms-linear-gradient(top,#00b7ea36%,#009ec3100%);/*IE10+*/ background:linear-gradient(top,#00b7ea36%,#009ec3100%);/*W3C*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea',endColorstr='#009ec3',GradientType=0);/*IE6-9*/ } .button01:active.bottombottom{ margin:-20px0010px; } .button01:active.top{ margin:-70px0010px; }