几种简单的社交网站的标志按钮
几种简单的社交网站的标志按钮。主要运用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及以下的浏览器预览效果：
