快速了解我们

    关怀客户——我们争做南京让客户放心的网站服务商。

    成就客户——我们致力于客户的满意和成功。

    创业创新——我们追求对客户和公司都重要的创新,同时快速而高效地推动其实现。

  • 营业时间及快速联系
  • 工作时间:8:30-17:00
  • 电话:025-85289060-816
  • 传真:025-85289060-815
  • 邮箱:service#003000.com

CSS3画共享按钮
发布人:admin | 来自:本站 | 发布时间:2012-04-17 19:39:41 | 点击次数:4612

HTML Markup

  1. <div class="demo"> 
  2.   <ul> 
  3.     <li class="facebook"><a href="#non" title="Share on Facebook">Facebooka>li> 
  4.     <li class="twitter"><a href="#non" title="Share on Twitter">Twittera>li> 
  5.     <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSSa>li> 
  6.     <li class="flickr"><a href="#non" title="Share on Flickr">Flickra>li> 
  7.     <li class="delicious"><a href="#non" title="Bookmark on Delicious">Deliciousa>li> 
  8.     <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIna>li> 
  9.     <li class="google"><a href="#non" title="Bookmark with Google">Googlea>li> 
  10.     <li class="orkut"><a href="#non" title="Share on Orkut">Orkuta>li> 
  11.     <li class="technorati"><a href="#non" title="Add to Technorati">Technoratia>li> 
  12.     <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibesa>li> 
  13.     <li class="google-plus"><a href="#non" title="Add to google+">Google+a>li> 
  14.     <li class="yahoo"><a href="#non" title="Add to yahoo">Yahooa>li> 
  15.     <li class="tumblr"><a href="#non" title="Add to tumblr">Tumblra>li> 
  16.   ul> 
  17. div> 
  18.  
CSS Code  
    1. <style type=text/css> 
    2. body  
    3. {  
    4.   font:1em/1.4 Cambria, Georgia, sans-serif;  
    5.   color:#333;  
    6.   background:#fff;  
    7.   margin:0;  
    8.   padding:0  
    9. }  
    10.  
    11. .demo  
    12. {  
    13.   width:500px;  
    14.   margin:50px auto;  
    15.   padding:20px  
    16. }  
    17.  
    18. ul  
    19. {  
    20.   list-style:none;  
    21.   overflow:hidden;  
    22.   font:.875em/1 Arial, sans-serif;  
    23.   margin:0;  
    24.   padding:0  
    25. }  
    26.  
    27. ul li  
    28. {  
    29.   float:left;  
    30.   width:66px;  
    31.   height:66px;  
    32.   margin:20px 20px 0 0  
    33. }  
    34.  
    35. ul li a  
    36. {  
    37.   display:block;  
    38.   width:64px;  
    39.   height:64px;  
    40.   overflow:hidden;  
    41.   border:1px solid transparent;  
    42.   line-height:64px;  
    43.   text-decoration:none;  
    44.   border-radius:5px  
    45. }  
    46.  
    47. ul li a:hover,ul li a:focus,ul li a:active  
    48. {  
    49.   opacity:0.8;  
    50.   border-color:#000  
    51. }  
    52.  
    53. .facebook a  
    54. {  
    55.   position:relative;  
    56.   text-transform:lowercase;  
    57.   text-indent:34px;  
    58.   letter-spacing:10px;  
    59.   font-weight:700;  
    60.   font-size:64px;  
    61.   line-height:66px;  
    62.   color:#fff;  
    63.   background:#3c5a98;  
    64.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    65.   border-color:#3c5a98  
    66. }  
    67.  
    68. .twitter a  
    69. {  
    70.   position:relative;  
    71.   text-indent:20px;  
    72.   letter-spacing:40px;  
    73.   font:bold 60px/1 Tahoma,sans-serif;  
    74.   line-height:60px;  
    75.   background:#daf6f7;  
    76.   text-shadow:3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;  
    77.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    78.   background-image:linear-gradient(top,#dbf7f8,#88e1e6);  
    79.   text-transform:lowercase;  
    80.   color:#76ddf8;  
    81.   border-color:#a8eaec  
    82. }  
    83.  
    84. .rss a  
    85. {  
    86.   position:relative;  
    87.   width:60px;  
    88.   text-transform:lowercase;  
    89.   text-indent:-186px;  
    90.   font-size:64px;  
    91.   font-weight:700;  
    92.   background:#e36443;  
    93.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    94.   background-image:linear-gradient(top,#f19242,#e36443);  
    95.   border-color:#ea6635;  
    96.   padding:0 2px  
    97. }  
    98.  
    99. .rss a::before  
    100. {  
    101.   content:"0a0";  
    102.   position:absolute;  
    103.   bottom:10px;  
    104.   left:10px;  
    105.   width:12px;  
    106.   height:12px;  
    107.   background:#fff;  
    108.   border-radius:12px  
    109. }  
    110.  
    111. .rss a::after  
    112. {  
    113.   content:"0a0";  
    114.   position:absolute;  
    115.   bottom:10px;  
    116.   left:10px;  
    117.   height:22px;  
    118.   width:22px;  
    119.   border:24px double #fff;  
    120.   border-radius:0 50px 0 0;  
    121.   border-width:24px 24px 0 0  
    122. }  
    123.  
    124. .flickr a  
    125. {  
    126.   position:relative;  
    127.   text-indent:-9000px;  
    128.   font-size:108px;  
    129.   font-weight:700;  
    130.   color:#fff;  
    131.   background:#fff;  
    132.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    133.   background-image:linear-gradient(top,#fff,#d2d2d2);  
    134.   border-color:#d2d2d2  
    135. }  
    136.  
    137. .flickr a:before  
    138. {  
    139.   content:"0a0";  
    140.   position:absolute;  
    141.   top:50%;  
    142.   left:30%;  
    143.   width:20px;  
    144.   height:20px;  
    145.   background:#085ec5;  
    146.   border:1px solid #003c84;  
    147.   border-radius:20px;  
    148.   background-image:linear-gradient(top,#005cc6,#003d83);  
    149.   margin:-10px 0 0 -10px  
    150. }  
    151.  
    152. .flickr a:after  
    153. {  
    154.   content:"0a0";  
    155.   position:absolute;  
    156.   top:50%;  
    157.   right:30%;  
    158.   width:20px;  
    159.   height:20px;  
    160.   border:1px solid #ba0060;  
    161.   background:#fd1e93;  
    162.   border-radius:20px;  
    163.   background-image:linear-gradient(top,#fd1e93,#cb026c);  
    164.   margin:-10px -10px 0 0  
    165. }  
    166.  
    167. .delicious a  
    168. {  
    169.   position:relative;  
    170.   text-align:center;  
    171.   text-indent:-9000px;  
    172.   font-size:108px;  
    173.   font-weight:700;  
    174.   color:#fff;  
    175.   background:#fff;  
    176.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    177.   background-image:linear-gradient(top,#fff,#d1d1d1);  
    178.   border-color:#d2d2d2  
    179. }  
    180.  
    181. .delicious a:before  
    182. {  
    183.   content:"0a0";  
    184.   position:absolute;  
    185.   top:0;  
    186.   right:0;  
    187.   width:30px;  
    188.   height:30px;  
    189.   border:1px solid #0060ce;  
    190.   background:#085ec5;  
    191.   border-radius:0 4px 0 0;  
    192.   background-images:linear-gradient(top,#0060ce,#003b7f)  
    193. }  
    194.  
    195. .delicious a:after  
    196. {  
    197.   content:"0a0";  
    198.   position:absolute;  
    199.   bottom:0;  
    200.   left:0;  
    201.   width:30px;  
    202.   height:30px;  
    203.   border:1px solid #000;  
    204.   background:#000;  
    205.   border-radius:0 0 0 4px;  
    206.   background-image:linear-gradient(top,#212121,#000)  
    207. }  
    208.  
    209. .linkedin a  
    210. {  
    211.   position:relative;  
    212.   width:60px;  
    213.   overflow:hidden;  
    214.   text-transform:lowercase;  
    215.   text-indent:-185px;  
    216.   font-size:64px;  
    217.   font-weight:700;  
    218.   color:#fff;  
    219.   background:#0c6596;  
    220.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    221.   background-image:linear-gradient(top,#5babcb,#0c6596);  
    222.   border-color:#185c80;  
    223.   padding:0 2px  
    224. }  
    225.  
    226. .google a  
    227. {  
    228.   position:relative;  
    229.   text-transform:lowercase;  
    230.   text-indent:16px;  
    231.   letter-spacing:40px;  
    232.   font:65px/44px Georgia, Times New Roman, Times, serif;  
    233.   color:#fff;  
    234.   background:#1e3c7f;  
    235.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    236.   background-image:linear-gradient(top,#447aec,#1e3c7f);  
    237.   border-color:#26478d  
    238. }  
    239.  
    240. .orkut a  
    241. {  
    242.   position:relative;  
    243.   text-indent:-9000px;  
    244.   font-size:108px;  
    245.   color:#b62b91;  
    246.   background:#fff;  
    247.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    248.   background-image:linear-gradient(top,#fff,#ceddf6);  
    249.   border-color:#b4c4dd  
    250. }  
    251.  
    252. .orkut a:before  
    253. {  
    254.   content:"0a0";  
    255.   position:absolute;  
    256.   top:50%;  
    257.   left:50%;  
    258.   width:40px;  
    259.   height:40px;  
    260.   border:1px solid #b0699e;  
    261.   background:#d779c0;  
    262.   border-radius:40px;  
    263.   box-shadow:0 0 2px rgba(0,0,0,0.6);  
    264.   margin:-21px 0 0 -21px  
    265. }  
    266.  
    267. .orkut a:after  
    268. {  
    269.   content:"0a0";  
    270.   position:absolute;  
    271.   top:50%;  
    272.   left:50%;  
    273.   width:26px;  
    274.   height:26px;  
    275.   background:#fff;  
    276.   border-radius:26px;  
    277.   box-shadow:0 0 2px rgba(0,0,0,0.6);  
    278.   background-image:linear-gradient(top,#eff4fc,#dce6f8);  
    279.   margin:-13px 0 0 -13px  
    280. }  
    281.  
    282. .technorati a  
    283. {  
    284.   position:relative;  
    285.   text-indent:-9000px;  
    286.   font-size:108px;  
    287.   color:#b62b91;  
    288.   background:#086B04;  
    289.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    290.   background-image:linear-gradient(top,#a3d679,#086b04);  
    291.   border-color:#266F12  
    292. }  
    293.  
    294. .technorati a:before  
    295. {  
    296.   content:"0a0";  
    297.   position:absolute;  
    298.   top:5px;  
    299.   right:-5px;  
    300.   width:40px;  
    301.   height:25px;  
    302.   border:8px solid #f5f5f5;  
    303.   border-radius:45px / 35px;  
    304.   box-shadow:0 0 2px rgba(0,0,0,0.6)  
    305. }  
    306.  
    307. .technorati a:after  
    308. {  
    309.   content:"0a0";  
    310.   position:absolute;  
    311.   top:40px;  
    312.   left:20px;  
    313.   width:0;  
    314.   height:0;  
    315.   border-color:transparent #f5f5f5;  
    316.   border-style:solid;  
    317.   border-width:0 0 18px 13px  
    318. }  
    319.  
    320. .netvibes a  
    321. {  
    322.   position:relative;  
    323.   text-align:center;  
    324.   text-indent:-9000px;  
    325.   font-size:178px;  
    326.   font-weight:700;  
    327.   color:#fff;  
    328.   background:#138210;  
    329.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    330.   background-image:linear-gradient(top,#68db21,#138210);  
    331.   border-color:#0c5f0c  
    332. }  
    333.  
    334. .netvibes a:after  
    335. {  
    336.   content:"+";  
    337.   position:absolute;  
    338.   left:0;  
    339.   top:0;  
    340.   width:64px;  
    341.   text-indent:0;  
    342.   text-align:center;  
    343.   font-size:88px;  
    344.   color:#fff  
    345. }  
    346.  
    347. .google-plus a  
    348. {  
    349.   position:relative;  
    350.   text-transform:lowercase;  
    351.   text-indent:-5px;  
    352.   letter-spacing:40px;  
    353.   font:96px/31px Georgia, Times New Roman, Times, serif;  
    354.   color:#fff;  
    355.   background:#1e3c7f;  
    356.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    357.   background-image:linear-gradient(top,#D43D2A,#A92B1D);  
    358.   border-color:#C4695F  
    359. }  
    360.  
    361. .google-plus a::before  
    362. {  
    363.   content:"+";  
    364.   font-size:46px;  
    365.   left:43px;  
    366.   position:absolute;  
    367.   top:-6px  
    368. }  
    369.  
    370. .yahoo a  
    371. {  
    372.   position:relative;  
    373.   text-transform:uppercase;  
    374.   text-indent:3px;  
    375.   letter-spacing:40px;  
    376.   font:65px/66px Georgia, Times New Roman, Times, serif;  
    377.   color:#fff;  
    378.   background:#1e3c7f;  
    379.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    380.   background-image:linear-gradient(top,#C639C2,#9E2999);  
    381.   border-color:#971278  
    382. }  
    383.  
    384. .yahoo a::before  
    385. {  
    386.   -moz-transform:rotate(19deg);  
    387.   -webkit-transform:rotate(19deg);  
    388.   -ms-transform:rotate(19deg);  
    389.   -o-transform:rotate(19deg);  
    390.   transform:rotate(19deg);  
    391.   content:"!";  
    392.   font-family:Arial;  
    393.   left:34px;  
    394.   position:absolute;  
    395.   top:7px  
    396. }  
    397.  
    398. .tumblr a  
    399. {  
    400.   position:relative;  
    401.   text-indent:24px;  
    402.   letter-spacing:40px;  
    403.   font:60px/1 Tahoma,sans-serif;  
    404.   line-height:60px;  
    405.   background:#daf6f7;  
    406.   text-shadow:1px 0 1px #FFFFFF, -2px -1px 1px #FFFFFF, 0 -1px 1px #FFFFFF, -2px -1px 1px #FFF;  
    407.   box-shadow:0 0 4px rgba(0,0,0,0.4);  
    408.   background-image:linear-gradient(top,#29486A,#253F5B);  
    409.   text-transform:lowercase;  
    410.   color:#fff;  
    411.   border-color:#425B6E  
    412. }  

    上一篇:没有了 下一篇:css修改图片颜色