此作品是一款非常实用的作品，纯css3样式代码实现，没有任何的jquery代码参与，配合微博的小logo图标实现超酷的微博关注按钮，直接可以用在任何网站上，如果想看到最佳效果的话请使用支持css3样式的主流浏览器访问。。。
代码代码如下：
a {
outline:none;
blr:expression(this.onFocus=this.blur());
text-decoration:none;
}
a.wb_sina {
float:right;
margin-top:23px;
margin-right:15px;
display:inline-block;
padding:4px 10px;
border-radius:3px;
background-color:#e55345;
background-image:-moz-linear-gradient(top,#e96249,#e03c40);
background-image:-ms-linear-gradient(top,#e96249,#e03c40);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#e96249),to(#e03c40));
background-image:-webkit-linear-gradient(top,#e96249,#e03c40);
background-image:-o-linear-gradient(top,#e96249,#e03c40);
background-image:linear-gradient(top,#e96249,#e03c40);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e96249',endColorstr='#e03c40',GradientType=0);
background-repeat:repeat-x;
text-shadow:0 -1px 0 rgba(0,0,0,.5);
border:1px solid #cf2b28;
color:#fff!important;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
}
a.wb_sina:hover {
background-image:-moz-linear-gradient(top,#e03c40,#e96249);
background-image:-ms-linear-gradient(top,#e03c40,#e96249);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#e03c40),to(#e96249));
background-image:-webkit-linear-gradient(top,#e03c40,#e96249);
background-image:-o-linear-gradient(top,#e03c40,#e96249);
background-image:linear-gradient(top,#e03c40,#e96249);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e03c40',endColorstr='#e96249',GradientType=0);
}
a.wb_sina span {
display:inline-block;
vertical-align:-5px;
margin-right:7px;
height:20px;
width:24px;
background:url(weibo.png) no-repeat;
}
a.wb_tencent {
float:right;
margin-top:23px;
margin-right:30px;
display:inline-block;
padding:4px 10px;
border-radius:3px;
background-color:#0e7fcc;
background-image:-moz-linear-gradient(top,#1288d4,#0771c1);
background-image:-ms-linear-gradient(top,#1288d4,#0771c1);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#1288d4),to(#0771c1));
background-image:-webkit-linear-gradient(top,#1288d4,#0771c1);
background-image:-o-linear-gradient(top,#1288d4,#0771c1);
background-image:linear-gradient(top,#1288d4,#0771c1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1288d4',endColorstr='#0771c1',GradientType=0);
background-repeat:repeat-x;
text-shadow:0 -1px 0 rgba(0,0,0,.5);
border:1px solid #0D6EB8;
color:#fff!important;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);
}
a.wb_tencent:hover {
background-color:#0e7fcc;
background-image:-moz-linear-gradient(top,#0771c1,#1288d4);
background-image:-ms-linear-gradient(top,#0771c1,#1288d4);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#0771c1),to(#1288d4));
background-image:-webkit-linear-gradient(top,#0771c1,#1288d4);
background-image:-o-linear-gradient(top,#0771c1,#1288d4);
background-image:linear-gradient(top,#0771c1,#1288d4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0771c1',endColorstr='#1288d4',GradientType=0);
}
a.wb_tencent span {
display:inline-block;
vertical-align:-5px;
margin-right:7px;
height:20px;
width:24px;
background:url(weibo.png) no-repeat 0 -20px;
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
css3 实用特效 button 3D特效