用CSS3来实现社交分享按钮

2020-05-06 09:05:52易采站长站整理

}
.outset-colored li a.twitter {
background:-moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #8ae0fd), color-stop(.10, #24bce6), color-stop(1, #1e9ec1));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#8ae0fd’, endColorstr=’#1e9ec1′); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#8ae0fd’, endColorstr=’#1e9ec1′)”; /* IE8 */
color: #f3f3f3;
border: 1px solid #1e9ec1;
}
.outset-colored li a:hover.twitter {
background:-moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #24bce6), color-stop(.01, #33ccff), color-stop(.10, #33ccff), color-stop(1, #33ccff));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#1e9ec1′, endColorstr=’#33ccff’); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#1e9ec1′, endColorstr=’#33ccff’)”; /* IE8 */
}
.outset-colored li a.flickr {
background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fc75ba), color-stop(.10, #e10374), color-stop(1, #c10263));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#fc75ba’, endColorstr=’#c10263′); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#fc75ba’, endColorstr=’#c10263′)”; /* IE8 */
color: #f3f3f3;
border: 1px solid #c10263;
}
.outset-colored li a:hover.flickr {
background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c10263), color-stop(.01, #e10374), color-stop(.10, #ff0283), color-stop(1, #ff0283));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=’#fc75ba’, endColorstr=’#ff0283′); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#fc75ba’, endColorstr=’#ff0283′)”; /* IE8 */}

在firefox和chrome中预览如下:

在ie9中预览效果:

在ie6/7/8中预览效果如下: