几种简单的社交网站的标志按钮

几种简单的社交网站的标志按钮。主要运用boder,border-radius，box-shadow等css技术

源代码下载地址：http://download.csdn.net/my

html代码如下：

<div class="container">
  <ul class="socialConnect">
    <li><a target="_blank" class="twitter" href="">Twitter</a></li>
    <li><a target="_blank" class="facebook" href="">Facebook</a></li>
    <li><a target="_blank" class="hnews" href="">Hacker News</a></li>
    <li><a target="_blank" class="forrst" href="">Forrst</a></li>
    <li class="last"><a target="_blank" class="rss" href="">RSS</a></li>
  </ul>
</div>

css代码如下：

* {
    margin:0;
    padding:0;
}
ul li {
    list-style:none;
}
.container {
    width:900px;
    margin:50px auto;
}
.socialConnect li {
    float:left;
    margin-right:10px;
}
.socialConnect li a {
    display:block;
    float:left;
    width:34px;
    height:34px;
    border:4px solid #444;
    text-indent:-999px;
    border-radius:75px;
    box-shadow:1px 2px 3px 0 rgba(0,0,0,0.2);
    -webkit-transition:all 100ms;
    -moz-transition:all 100ms;
    -o-transition:all 100ms;
    transition:all 100ms;
}
.socialConnect li a.twitter {
    background:#defcfe url(images/icon-connect.png) no-repeat 4px 9px;
    border-color: #42ced7;
}
.socialConnect li a.forrst {
    background: #dcf3c8 url(images/icon-connect.png) no-repeat 4px -44px;
    border-color: #6ca140;
}
.socialConnect li a.hnews {
    background: #fbf1d6 url(images/icon-connect.png) no-repeat 4px -90px;
    border-color: #f08641;
}
.socialConnect li a.facebook {
    background: #dcebf3 url(images/icon-connect.png) no-repeat 3px -144px;
    border-color: #5978b7;
}
.socialConnect li a.rss {
    background: #faebce url(images/icon-connect.png) no-repeat 5px -193px;
    border-color: #e55838;
}
.socialConnect li a:hover {
    position:relative;
    top:-2px;
    box-shadow:1px 2px 5px 0 rgba(0,0,0,0.2);
}
.socialConnect li a:hover.twitter {
    background-color: #edfdfe;
}
.socialConnect li a:hover.forrst {
    background-color: #e4f6d5;
}
.socialConnect li a:hover.hnews {
    background-color: #fcf6e4;
}
.socialConnect li a:hover.facebook {
    background-color: #e7f2f7;
}
.socialConnect li a:hover.rss {
    background-color: #fbf1dc;
}

浏览器预览效果IE9,firefox16.0,chrome中预览：

ie8及以下的浏览器预览效果：