CSS3画共享按钮


把代码贴上来与大家一起分享:
HTML Markup
<div class="demo">
<ul>
<li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
<li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
<li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
<li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
<li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
<li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
<li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
<li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
<li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
<li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
<li class="google-plus"><a href="#non" title="Add to google+">Google+</a></li>
<li class="yahoo"><a href="#non" title="Add to yahoo">Yahoo</a></li>
<li class="tumblr"><a href="#non" title="Add to tumblr">Tumblr</a></li>
</ul>
</div>

CSS Code
<style type=text/css>
body
{
font:1em/1.4 Cambria, Georgia, sans-serif;
color:#333;
background:#fff;
margin:0;
padding:0
}
.demo
{
width:500px;
margin:50px auto;
padding:20px
}
ul
{
list-style:none;
overflow:hidden;
font:.875em/1 Arial, sans-serif;
margin:0;
padding:0
}
ul li
{
float:left;
width:66px;
height:66px;
margin:20px 20px 0 0
}
ul li a
{
display:block;
width:64px;
height:64px;
overflow:hidden;
border:1px solid transparent;
line-height:64px;
text-decoration:none;
border-radius:5px
}
ul li a:hover,ul li a:focus,ul li a:active
{
opacity:0.8;
border-color:#000
}
.facebook a
{
position:relative;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:700;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
box-shadow:0 0 4px rgba(0,0,0,0.4);
border-color:#3c5a98
}
.twitter a
{
position:relative;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma,sans-serif;
line-height:60px;
background:#daf6f7;
text-shadow:3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#dbf7f8,#88e1e6);
text-transform:lowercase;
color:#76ddf8;
border-color:#a8eaec
}
.rss a
{
position:relative;
width:60px;
text-transform:lowercase;
text-indent:-186px;
font-size:64px;
font-weight:700;
background:#e36443;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#f19242,#e36443);
border-color:#ea6635;
padding:0 2px
}
.rss a::before
{
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:12px;
height:12px;
background:#fff;
border-radius:12px
}
.rss a::after
{
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
height:22px;
width:22px;
border:24px double #fff;
border-radius:0 50px 0 0;
border-width:24px 24px 0 0
}
.flickr a
{
position:relative;
text-indent:-9000px;
font-size:108px;
font-weight:700;
color:#fff;
background:#fff;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#fff,#d2d2d2);
border-color:#d2d2d2
}
.flickr a:before
{
content:"\00a0";
position:absolute;
top:50%;
left:30%;
width:20px;
height:20px;
background:#085ec5;
border:1px solid #003c84;
border-radius:20px;
background-image:linear-gradient(top,#005cc6,#003d83);
margin:-10px 0 0 -10px
}
.flickr a:after
{
content:"\00a0";
position:absolute;
top:50%;
right:30%;
width:20px;
height:20px;
border:1px solid #ba0060;
background:#fd1e93;
border-radius:20px;
background-image:linear-gradient(top,#fd1e93,#cb026c);
margin:-10px -10px 0 0
}
.delicious a
{
position:relative;
text-align:center;
text-indent:-9000px;
font-size:108px;
font-weight:700;
color:#fff;
background:#fff;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#fff,#d1d1d1);
border-color:#d2d2d2
}
.delicious a:before
{
content:"\00a0";
position:absolute;
top:0;
right:0;
width:30px;
height:30px;
border:1px solid #0060ce;
background:#085ec5;
border-radius:0 4px 0 0;
background-images:linear-gradient(top,#0060ce,#003b7f)
}
.delicious a:after
{
content:"\00a0";
position:absolute;
bottom:0;
left:0;
width:30px;
height:30px;
border:1px solid #000;
background:#000;
border-radius:0 0 0 4px;
background-image:linear-gradient(top,#212121,#000)
}
.linkedin a
{
position:relative;
width:60px;
overflow:hidden;
text-transform:lowercase;
text-indent:-185px;
font-size:64px;
font-weight:700;
color:#fff;
background:#0c6596;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#5babcb,#0c6596);
border-color:#185c80;
padding:0 2px
}
.google a
{
position:relative;
text-transform:lowercase;
text-indent:16px;
letter-spacing:40px;
font:65px/44px Georgia, Times New Roman, Times, serif;
color:#fff;
background:#1e3c7f;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#447aec,#1e3c7f);
border-color:#26478d
}
.orkut a
{
position:relative;
text-indent:-9000px;
font-size:108px;
color:#b62b91;
background:#fff;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#fff,#ceddf6);
border-color:#b4c4dd
}
.orkut a:before
{
content:"\00a0";
position:absolute;
top:50%;
left:50%;
width:40px;
height:40px;
border:1px solid #b0699e;
background:#d779c0;
border-radius:40px;
box-shadow:0 0 2px rgba(0,0,0,0.6);
margin:-21px 0 0 -21px
}
.orkut a:after
{
content:"\00a0";
position:absolute;
top:50%;
left:50%;
width:26px;
height:26px;
background:#fff;
border-radius:26px;
box-shadow:0 0 2px rgba(0,0,0,0.6);
background-image:linear-gradient(top,#eff4fc,#dce6f8);
margin:-13px 0 0 -13px
}
.technorati a
{
position:relative;
text-indent:-9000px;
font-size:108px;
color:#b62b91;
background:#086B04;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#a3d679,#086b04);
border-color:#266F12
}
.technorati a:before
{
content:"\00a0";
position:absolute;
top:5px;
right:-5px;
width:40px;
height:25px;
border:8px solid #f5f5f5;
border-radius:45px / 35px;
box-shadow:0 0 2px rgba(0,0,0,0.6)
}
.technorati a:after
{
content:"\00a0";
position:absolute;
top:40px;
left:20px;
width:0;
height:0;
border-color:transparent #f5f5f5;
border-style:solid;
border-width:0 0 18px 13px
}
.netvibes a
{
position:relative;
text-align:center;
text-indent:-9000px;
font-size:178px;
font-weight:700;
color:#fff;
background:#138210;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#68db21,#138210);
border-color:#0c5f0c
}
.netvibes a:after
{
content:"+";
position:absolute;
left:0;
top:0;
width:64px;
text-indent:0;
text-align:center;
font-size:88px;
color:#fff
}
.google-plus a
{
position:relative;
text-transform:lowercase;
text-indent:-5px;
letter-spacing:40px;
font:96px/31px Georgia, Times New Roman, Times, serif;
color:#fff;
background:#1e3c7f;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#D43D2A,#A92B1D);
border-color:#C4695F
}
.google-plus a::before
{
content:"+";
font-size:46px;
left:43px;
position:absolute;
top:-6px
}
.yahoo a
{
position:relative;
text-transform:uppercase;
text-indent:3px;
letter-spacing:40px;
font:65px/66px Georgia, Times New Roman, Times, serif;
color:#fff;
background:#1e3c7f;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#C639C2,#9E2999);
border-color:#971278
}
.yahoo a::before
{
-moz-transform:rotate(19deg);
-webkit-transform:rotate(19deg);
-ms-transform:rotate(19deg);
-o-transform:rotate(19deg);
transform:rotate(19deg);
content:"!";
font-family:Arial;
left:34px;
position:absolute;
top:7px
}
.tumblr a
{
position:relative;
text-indent:24px;
letter-spacing:40px;
font:60px/1 Tahoma,sans-serif;
line-height:60px;
background:#daf6f7;
text-shadow:1px 0 1px #FFFFFF, -2px -1px 1px #FFFFFF, 0 -1px 1px #FFFFFF, -2px -1px 1px #FFF;
box-shadow:0 0 4px rgba(0,0,0,0.4);
background-image:linear-gradient(top,#29486A,#253F5B);
text-transform:lowercase;
color:#fff;
border-color:#425B6E
}
文章附属文件

文件名称: 20180105115231394124.png

文件大小:24.39 KB

文件签名:4BB7CFAE0C2023BB8901468A022EC9E51991C32B

评论列表

此文章还没有评论。