一款基于css3的动画按钮代码教程

为大家分享了很多款纯css3实现的实用按钮。今天给大家带来一款基于css3的动画按钮。实现的效果图如下：
  g$ k6 l: C7 Z  J

                               
登录/注册后可看大图

' s0 }& \, z2 ]  m1 b: O# [$ K实现的代码。
html代码：
* K" B6 g, I- f- g" h3 Pxml/html code复制内容到剪贴板
% r( C) ]7 n& `/ f<div class=share-buttons>
6 R  g0 V9 u. g- k  p, I- U<div class=share-button>
3 D  ]1 ^/ D: P' a) ~* L<div class=share-button-secondary>
<div class=share-button-secondary-content>
1 H4 x6 u6 T+ T8 Tshare on twitter
9 A6 r: j2 F/ X& L) T% K: H</div>
+ u! a" R" J  c2 M3 z; e$ E</div>
- z2 q- j  l8 F7 z6 I$ D<div class=share-button-primary>
<i class=share-button-icon fa fa-twitter></i>
</div>
4 ]2 y* |2 J, J1 E+ {1 [5 R* A9 \4 C</div>
<div class=share-button>
2 N8 M9 E! }6 f  B1 ]( M3 R+ d<div class=share-button-secondary>
- U- e, r$ N# B# [. P5 Z$ S<div class=share-button-secondary-content>
share on facebook
0 j. w7 I) g$ ~* Y1 s; K/ `! }* C: t</div>
& b3 _/ f- x6 h5 I; A1 F</div>
, c' ?. {! C' B' {% X$ d' O. }<div class=share-button-primary>
<i class=share-button-icon fa fa-facebook></i>
3 M7 V! M% {" z" r</div>
</div>
<div class=share-button>
6 q, q) x2 a7 E  t$ T4 A9 J<div class=share-button-secondary>
! A4 R! D2 z/ q$ R) \4 Y1 ~4 G<div class=share-button-secondary-content>
pin on pinterest
! X7 _8 n0 e: Z& ]</div>
" B7 ~7 p6 B2 r. e) {5 w. R</div>
) C. ?- {0 B+ J0 c! w<div class=share-button-primary>
<i class=share-button-icon fa fa-pinterest></i>
8 f, v* Q" J9 e6 G</div>
1 p; u, g) X, ~4 _: @4 {0 L</div>
- ^% v" a% |; z- S<div class=share-button>
4 O# a$ K  P. L& M8 k1 X<div class=share-button-secondary>
# Q: \; r: V, q<div class=share-button-secondary-content>
4 o, s! C& {" t- Q& P  yshare on tumblr
( S2 i2 h6 \# p5 l</div>
</div>
! ?* B+ E$ y; ]5 p$ k: m% I/ A<div class=share-button-primary>
<i class=share-button-icon fa fa-tumblr></i>
</div>
8 m$ p4 o, A8 O</div>
) Z6 h. y  P$ o6 \<div class=share-button>
<div class=share-button-secondary>
<div class=share-button-secondary-content>
) s/ P  g. e( I& K/ M2 J0 cshare on google+
</div>
6 R# d7 e% ~$ L</div>
& T* x- ?; U- G' }<div class=share-button-primary>
<i class=share-button-icon fa fa-google-plus></i>
7 V- h4 C* t" h/ M4 w  p8 K</div>
</div>
7 ~! M3 f1 }% G. o: r& m6 X. v1 y</div>
- T" Q) g0 N" o# F# [3 i% g  wcss3代码：
css code复制内容到剪贴板
body
! ^" q* a  E7 c8 {( t, ~{
1 _, ?+ E& f: z( f$ V0 Nbackground: -webkit-linear-gradient(0deg, #ff8008 10%, #ffc837 90%);
background: linear-gradient(90deg, #ff8008 10%, #ffc837 90%);
1 j& D4 P. `: D! Q# i5 xpadding: 2em;
: J& n  F" S' ktext-align: center;
: i+ }# b9 Q3 x( B! s}

*
1 M+ G7 Y8 a/ A9 N4 s' v/ X{
* P$ L) }. ^3 e% D-moz-box-sizing: border-box;
6 i* P( i* H2 Y3 ?box-sizing: border-box;
}

.share-buttons
{
$ o8 o2 V. P6 l8 v* n0 Y& \position: absolute;
width: 300px;
7 x" k( \5 ~! S% V7 h/ x: Oheight: 212px;
) h7 A/ P0 g+ m; [! Wpadding-left: 135px;
' W6 g" J- S; G! Htop: 50%;
* Q: c4 m% h, ^! L5 j. Zleft: 50%;
0 ^) v' X& t( \- Nmargin-left: -150px;
margin-top: -106px;
/ i# o. ^4 D1 r1 I}
.share-buttons .share-button
{
float: left;
margin-top: 15px;
}
.share-buttons .share-button:first-child
{
* N, w4 z1 _6 ~; R, Dmargin-top: 0;
( |/ k3 t6 s4 l. ]}
.share-buttons .share-button:after
9 \  `- f. E! S{
clear: both;
0 D9 y( F3 e% }3 x$ q: Odisplay: table;
}
/ Q3 z, A+ d" Z) z" {
.share-button
{
8 Z% X$ X' {! j# o. Ndisplay: block;
position: relative;
height: 30px;
7 Q& O* F2 ?/ y: d+ w}
: d- m) x  \- M' t.share-button:hover
" G1 W& B  w$ ]& P3 ~# ]{
  C: u7 H- p# s4 B9 _  B! s! icursor: pointer;
! w. q; d/ G9 S6 F. t9 c: q" G}
) G8 P' n( }! D2 M5 b7 a. ~" x.share-button:hover .share-button-primary
{
! ]4 x2 D5 @  w) z, _box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
}
, A/ s$ J; q) d2 w.share-button:hover .share-button-secondary-content
{
5 t8 S/ r* t# E' d4 p-webkit-transform: translate3d(0, 0, 0);
. u" c9 P) g& Q1 w& ftransform: translate3d(0, 0, 0);
}
( j% X3 X: l9 ?
0 i  P  I; a0 R: L% ^! k! i.share-button-primary
{
position: absolute;
: V: I- c, B/ y& G9 H! |background: #fff;
width: 30px;
height: 30px;
border-radius: 15px;
+ e( I$ \( G* e2 z0 Z0 U: C* ?left: 0;
5 K) Z( A1 }/ E5 n3 n& etop: 50%;
margin-top: -15px;
& x0 F) l7 J# @- @- l6 D  k/ @: M% j}

.share-button-icon
2 F5 {% n4 C1 m/ a{
display: block;
+ v: I3 y9 I' O/ o: Y5 Gcolor: #242424;
position: absolute;
. ~5 }8 q# ~+ l/ Nwidth: 30px;
line-height: 30px;
  `' C: }2 ?+ C- t8 o3 j. v: bfont-size: 16px;
margin-top: 1px;
}

.share-button-secondary
{
overflow: hidden;
margin-left: 15px;
3 m" M' i+ X' j& f& D2 \/ p- Fheight: 30px;
}
% k# n& q8 t3 ^! O
% t; E( w3 ^( Y3 t.share-button-secondary-content
* T. l- `6 s5 v# R. c) q{
font-family: sans-serif;
, p/ H: c* }( i4 T5 @. [6 ]2 T% d- Efont-size: .75em;
background: #fff;
+ J6 P- i3 X$ C1 w% g/ v7 z, vdisplay: block;
height: 30px;
text-align: left;
padding-left: 24px;
padding-right: 18px;
line-height: 30px;
  T% w" k0 t7 f" ~, m  fcolor: #242424;
border-radius: 0 15px 15px 0;
4 x# i* I5 [. f) H  c+ G-webkit-transform: translate3d(-100%, 0, 0);
! x. h$ t# G, K0 Htransform: translate3d(-100%, 0, 0);
. ^9 s' h; ~/ R) g-webkit-transition: -webkit-transform 175ms ease;
7 z* H% z; [) C, htransition: transform 175ms ease;
}
" x+ r% B8 p& J; l
更多网页制作信息请查看： 网页制作

有现实中的偶在这...不佩服.............佩服电影里的....

呵呵　　我傻了‘～～哈哈

刚才游戏去了 ~~嘿嘿~~

注:偶是女滴,千真万确,毋庸置疑!

还没崇拜过谁呢,满足一下愿望吧,谢谢!

楼主，你要继续努力啊！你是bbs的希望啊！你是网络文学的希望啊！你是整个网络界的希望文学界的希望啊！你是整个人类的希望啊！你是整个太阳系的希望啊！你是整个异次元空间的希望啊！

你可是难得来坐坐啊~~~

感谢党和人民的关爱~~~

嘻嘻~` 要是只看你的话~`~`` 很容易让人家以为你也跟偶们一样是天使类~`（偷笑中````````