五款漂亮的纯css3动画按钮的实例教程

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

                               
登录/注册后可看大图

, Y3 Q; g, n5 k" W" |9 W让我们一起来看看实现这5中样式动画按钮的html代码和css代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。
html代码：
xml/html code复制内容到剪贴板
& d" U* k% B& ]<div class=button01>
: l7 m0 W/ a) |! d<a href=#>download</a>
0 V: S1 b  s/ }. c- |3 w. }<p class=top>click to begin</p>
% f# }6 ]9 W) f+ u5 |! S2 X: k<p class=bottom>1.2mb .zip</p>
8 V- r( l( o5 [</div>
css代码：
css code复制内容到剪贴板
.button01 {
* ^! S: H: F' b2 r# k' s# [) `( bwidth: 200px;
margin: 50px auto 20px auto;
$ H5 d' Y' @' _- ^9 A}

.button01 a {
display: block;
height: 50px;
width: 200px;

/*type*/
color: white;
font: 17px/50px helvetica, verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;

/*gradient*/
3 c2 d" S/ |& c3 c  Ybackground: #00b7ea; /* old browsers */
, y/ ~$ a0 X' q) J4 dbackground: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* ff3.6+ */
# E  f' k  c3 H/ Obackground: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* chrome10+,safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* ie10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* w3c */
! s: C! s/ ^: c1 g+ J$ Rfilter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */
" w3 l4 G+ _4 f- n4 g}

.button01 a, p {
' T1 V) V% O, P6 X' Z-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
4 ~9 @: o' r# N0 M& ^
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
" [* S% }- n6 q}

p {
background: #222;
, d! {5 n0 {2 M9 ]5 J6 F# _display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
3 a6 Z& _6 O' W
* L' C- L" Q. x/*type*/
. e  U, T, J8 o( h" y! Htext-align: center;
) O, l: P' }8 ~" e) ufont: 12px/45px helvetica, verdana, sans-serif;
color: #fff;

" r2 ^2 [; G$ K# H1 Q- r/*position*/
position: absolute;
6 }$ Y1 a/ V* J' x( t" i/ ]  xz-index: -1;
; o4 S+ b( R. d$ E' D
/*transition*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
' v/ {, S3 ~5 X1 D5 I- R-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
& p6 S4 \+ L2 e}

' H' Q6 _# T/ U$ }' ]/ D2 E* H/*hover*/
8 d, A" H& T3 k* u5 b.button01:hover .bottombottom {
margin: -10px 0 0 10px;
}
4 B6 n7 _5 X! [( @( u0 e7 s( L
.button01:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
" X9 |4 I: i! L# Q/ H4 M2 E
/*active*/
.button01 a:active {
$ M) D. o+ a0 W! X, bbackground: #00b7ea; /* old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* ff3.6+ */
+ f8 k  n9 P. @5 m9 P( ?' V' Abackground: -webkit-gradient(linear, left top, left bottombottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
) N0 e, Q& z# ^, Nbackground: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* chrome10+,safari5.1+ */
/ z) Q0 a2 a& {6 y5 `8 Hbackground: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* ie10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* w3c */
8 f3 m6 D6 ?% y( t, m2 ?filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */

}
, U0 V7 S# {' Y+ k3 D
/ F, S1 p: _9 `! s7 b* J( U  b+ C.button01:active .bottombottom {
margin: -20px 0 0 10px;
6 V# Z1 U7 U. v5 v) L! s" v- D}
: v! U2 }4 q0 A$ w: }; B+ `  o
.button01:active .top {
margin: -70px 0 0 10px;
}
' G: C5 d+ p/ C) A* ?

更多网页制作信息请查看： 网页制作

你这样的表现，就只配这几个字：窝囊废

相比他连说拜拜的 想法都没了 哈哈

这话从何说起那~~~

对于这种刚发的帖子，我总是毫不犹豫的顶了。如果火了就是个前排，可以混个脸熟，说不定谁好心就给粉了…稳赚不赔；如果沉了就感觉是我弄沉的，很有成就感，还能捞经验。

为了不让帖子沉得太快！！！为了人人知道这个~！！ 我不是原创~！！但是我要把他发扬广大~！！！

成长可以说已经是很幸福的了。但在另一方面，作者也不是温室里的花*，只能作些鸳鸯蝴蝶 的文章。在前面我已经说过了，这篇文章比形散神聚更胜一筹。诸位见过大风沙没有

哦~~~明白了....