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

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

                               
登录/注册后可看大图

让我们一起来看看实现这5中样式动画按钮的html代码和css代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。
html代码：
xml/html code复制内容到剪贴板
' |# d) i4 z+ N<div class=button01>
' N. H# I+ f3 Y3 W* X/ |- G<a href=#>download</a>
( C5 e6 H0 d# Y$ `<p class=top>click to begin</p>
<p class=bottom>1.2mb .zip</p>
</div>
* p) P7 C. p; \* z3 dcss代码：
0 t" e+ n; j5 _; `, Dcss code复制内容到剪贴板
.button01 {
3 _! T, N$ i. b0 wwidth: 200px;
7 [' \( r4 g2 x$ a8 v, dmargin: 50px auto 20px auto;
}

7 ~. A9 g) J0 `* K1 I% ^.button01 a {
1 _5 D" F& \% tdisplay: block;
height: 50px;
" c' C7 l$ l: P  ?& ?, }' W3 h# u1 Nwidth: 200px;

/*type*/
color: white;
font: 17px/50px helvetica, verdana, sans-serif;
9 ^  H$ d" {( u3 M$ r1 B2 n* Gtext-decoration: none;
text-align: center;
text-transform: uppercase;
' X. j" G# y" w
' d6 y2 s5 y: Y8 J5 V/*gradient*/
* S3 o+ S0 \% f1 B+ I4 Abackground: #00b7ea; /* old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* ff3.6+ */
; u' {$ B% ^2 s. R9 qbackground: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
" G# o) R+ I) |. {$ C- O4 Kbackground: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* chrome10+,safari5.1+ */
* f5 T6 K1 @8 ^% h+ cbackground: -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 */
6 x0 v: v, f4 g: Xfilter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */
}
; G% `( v( Z3 {; a" ^6 n3 }
.button01 a, p {
' L2 ^0 J0 P5 |' @; l5 `-webkit-border-radius: 10px;
. U* a& L0 X1 V8 R-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
* v  j# t8 z! K  ~& w6 pbox-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
- r9 N( r9 C* Q
# V" g, }" J0 P4 w1 np {
9 C  n5 ?$ g' w$ F! }, g3 M: gbackground: #222;
display: block;
( z- D! ~4 [; t  }- ^2 _; ^height: 40px;
6 c4 M" H+ Z" U1 [# i4 W  S8 ]; ewidth: 180px;
) D8 L+ ]0 S2 p# Vmargin: -50px 0 0 10px;

' i. O& c* N& P& f. o7 ^+ f1 r3 T/*type*/
text-align: center;
9 S/ e, m/ V% @$ Cfont: 12px/45px helvetica, verdana, sans-serif;
color: #fff;
2 X) n" _4 x* n6 b1 |; m
% T8 P- f$ v) o) M3 y/*position*/
9 t7 ~8 P# G' H, X$ s# |position: absolute;
! Z2 \+ Y" |0 U' C0 d  }z-index: -1;

) H1 t0 G, u# G$ D% U/*transition*/
-webkit-transition: margin 0.5s ease;
$ L" F' V& M$ b9 L' w9 C; b-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
- ~" {/ c# ?0 Q8 p# E) l4 ^-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
2 m! ~4 ]  G9 `# @( e}
3 A, [  F  v, l! U* a
/*hover*/
.button01:hover .bottombottom {
margin: -10px 0 0 10px;
1 i0 A# m$ _3 d, j  s2 j5 `5 W}

.button01:hover .top {
margin: -80px 0 0 10px;
" `' t) L: |, ^3 ~line-height: 35px;
}

" S6 J" V+ y+ a+ K/*active*/
9 t, S4 o2 Q9 E0 }.button01 a:active {
background: #00b7ea; /* old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* ff3.6+ */
; f+ S, V3 S2 S8 s& t3 {background: -webkit-gradient(linear, left top, left bottombottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* chrome,safari4+ */
1 f0 l+ ]1 n' Sbackground: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* chrome10+,safari5.1+ */
- m1 n- G" b( Y" I+ g6 X5 l- ubackground: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* opera 11.10+ */
( {8 }, b2 G( f$ |/ Rbackground: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* ie10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* w3c */
: D' x/ h0 |9 ?filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00b7ea', endcolorstr='#009ec3',gradienttype=0 ); /* ie6-9 */

6 Z( P. F+ f& |, C( L}

.button01:active .bottombottom {
% m4 }% s# E" U( c5 H: u: xmargin: -20px 0 0 10px;
- K, j" P1 D* ^6 r4 f$ H}

.button01:active .top {
& Q- w. S9 W$ w# M) b9 `margin: -70px 0 0 10px;
4 N$ a* w# |8 I0 M  r  D% K4 j}

, L5 X1 ^9 C" U5 D9 W) F
更多网页制作信息请查看： 网页制作

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

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

这话从何说起那~~~

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

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

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

哦~~~明白了....