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

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

                               
登录/注册后可看大图

; M+ w7 y6 R) N$ Z4 E' c/ @/ H让我们一起来看看实现这5中样式动画按钮的html代码和css代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。
html代码：
xml/html code复制内容到剪贴板
<div class=button01>
<a href=#>download</a>
! T) H7 b  @! |1 \+ K; X9 m. D4 u<p class=top>click to begin</p>
<p class=bottom>1.2mb .zip</p>
</div>
* F$ ^2 O7 h. Y4 zcss代码：
; R, O/ X8 `, [3 d5 Q* ?! ycss code复制内容到剪贴板
.button01 {
' w, \7 |" z: d3 Z3 l/ e. Y6 a- nwidth: 200px;
  X& ?+ o$ k5 p# G$ i' \, Pmargin: 50px auto 20px auto;
: R$ Y) u, B8 V( L& \  c. X}
1 C9 v  U. J) C& i# _' f; U
.button01 a {
0 l# e. d! v0 b* W' O# @display: block;
/ D, t7 [3 f+ y$ aheight: 50px;
width: 200px;
0 Z4 @1 Z: z  ~4 ?+ P
/*type*/
color: white;
! S( R% e8 Z' E9 kfont: 17px/50px helvetica, verdana, sans-serif;
# G- }) K# g. ^/ Y1 u' ]" Jtext-decoration: none;
+ H; `5 I- p- v7 a# G8 H& j, otext-align: center;
text-transform: uppercase;

: H$ `2 L6 T9 z' T* S" z3 D/*gradient*/
background: #00b7ea; /* old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
2 U; N- R. F- ]- Ybackground: -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 */
, o( O  M9 H- Z& }$ M9 yfilter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */
}
" }+ H9 H# D) M  ^" A, i7 V( e
.button01 a, p {
-webkit-border-radius: 10px;
% g7 w$ [2 Q! Z/ N1 {3 Z-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
% V* S' t4 A- S* Q3 W-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

0 b; E; u  M; _! K# dp {
9 ]8 T* L0 h0 P# Z- Gbackground: #222;
display: block;
/ u  ~* r, u8 pheight: 40px;
width: 180px;
+ n* k1 ?# Y5 T1 q+ lmargin: -50px 0 0 10px;
% H2 r5 D9 v- H6 s6 m, p  `
# W1 G0 h3 Q/ |; E9 U& Q/*type*/
5 E- @3 h+ [+ q4 P! Z) B! e- T8 rtext-align: center;
! F7 W. S! p% Sfont: 12px/45px helvetica, verdana, sans-serif;
- g; o; Q9 Q: x7 Hcolor: #fff;

8 y) j+ Q( p& F$ r; @6 U1 V( z$ e/*position*/
position: absolute;
3 ]% [! d& c* c, z: l/ X$ az-index: -1;
( m  x- e3 z6 o& o
. A7 V5 O) C1 e/*transition*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
! F' i) F7 F) J: a3 G+ n-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
( W8 _. S8 F3 I' e: q}

0 L7 t- A' \6 |$ L$ `/*hover*/
% ^+ C# U. i1 Q5 k' d.button01:hover .bottombottom {
margin: -10px 0 0 10px;
}
8 R. M  g- b/ n. }
" O4 N1 g7 a' o" h# `$ |7 g8 L* h.button01:hover .top {
) I, G% z0 P! W9 L, `) V% u) {margin: -80px 0 0 10px;
line-height: 35px;
}
" z4 e. {% M+ E, {3 u! M0 y
7 _& a+ H& I% q3 T8 q. J  z/*active*/
.button01 a:active {
( ~6 S% U4 s& K# P8 ?. ~% g6 L6 Zbackground: #00b7ea; /* old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
- P2 X) f, q( V# C# c, |8 E2 }background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* chrome10+,safari5.1+ */
5 W# j8 S1 J+ Bbackground: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* ie10+ */
& X  L/ ^2 m% J& X' I* _6 D* ]  @background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* w3c */
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */
- G" i% j9 E2 g* Z, F- m
}
; k! i: J2 b. I
, H9 A' f5 z( x8 `: z/ `.button01:active .bottombottom {
margin: -20px 0 0 10px;
% Y4 N& W* L( f}
) [6 \1 Z( B7 B& E( c$ T
.button01:active .top {
0 v: w; ]" N+ J& ?/ wmargin: -70px 0 0 10px;
9 V% z: P+ K4 Q" j; n/ w! U}
7 i3 x6 z# N* h: b/ q

' @0 l6 y( E5 i# ^更多网页制作信息请查看： 网页制作

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

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

这话从何说起那~~~

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

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

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

哦~~~明白了....