用CSS3来实现社交分享按钮

以前实现按钮一般都是用图片来实现的，特别是一些拥有质感的按钮，今天练习了一些相关方面的的例子，用css3来实现Social Media Buttons

html代码如下

复制代码代码如下:
<div>
<ul>
<li> <a href=” ” title=”My E-Mail”> <img src=”images/gmail_white.png” /> <span>E-Mail</span> </a> </li>
<li> <a href=”#” title=”My LinkedIn Page”> <img src=”images/linkedin_white.png” /> <span>LinkedIn</span> </a> </li>
<li> <a href=”#” title=”My Facebook Page”> <img src=”images/facebook_white.png” /> <span>Facebook</span> </a> </li>
<li> <a href=“#” title=”My Twitter Page”> <img src=”images/twitter_white.png” /> <span>Twitter</span> </a> </li>
<li> <a href=”#” title=”My Flickr Page”> <img src=”images/flickr_white.png” /> <span>Flickr</span> </a> </li>
</ul>
</div>

css代码如下

复制代码代码如下:
* {
margin:0;
padding:0;
}
.outset-colored {
font-family:Helvetica, Verdana, Arial, sans-serif;
font-size: 14px;
list-style-type: none;
margin: 10px 0 0 10px;
}
.outset-colored ul {
list-style-type:none;
display:block;
}
.outset-colored li {
float:left;
height:30px;
margin:0 8px 7px 0;
}
.outset-colored li a {
color:#424242;
float:left;
font-size:16px;
font-weight:bold;
height:24px;
padding-left: 27px;
padding-top: 6px;
position: relative;
text-decoration: none;
border: 1px solid #bfc1c6;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-borer-radius: 5px;
border-radius:5px;
}
.outset-colored li a img {
height:16px;
left:7px;
margin-right:7px;
position:absolute;
top:7px;
width:16px;
border:none;
}
.outset-colored li a span {
display: block;
height: 22px;
padding-right: 7px;
overflow: hidden;/*width: 70px; Add a width here if you want all the buttons to be the same size.*/
}
span.site {
font-size: 14px;
line-height: 20px;
}
.outset-colored li a.email {
background:-moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff6666), color-stop(.10, #cc0000), color-stop(1, #c40202));
color: #f3f3f3;
border: 1px solid #c40202;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#ff6666′, endColorstr=’#c40202′); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ff6666′, endColorstr=’#c40202′)”; /* IE8 */