使用CSS3实现社会共享按钮
大多数共享按钮都是通过图片实现的。今天我们尝试使用CSS3实现社会共享按钮，这是非常实用的，和有需要的朋友可以参考一下。在实现按钮之前，通常用图片来实现，特别是带有纹理按钮的图片。今天，我们已经做了一些相关的例子，使用CSS3实现社会媒体按钮。
HTML代码如下所示
复制代码代码如下所示：
电子邮件
脸谱网
推特
Flickr
CSS代码如下所示
复制代码代码如下所示：
{ *
保证金：0；
填充：0；
}
{开始着色
字体：黑体，Verdana，Arial，无衬线字体；
字体大小：14px；
列表样式类型：无；
保证金：00 10px 10px；
}
开始彩色UL
列表样式类型：无；
显示块；
}
开始着色李{
浮点数：左；
身高：30px；
保证金：0 8px 7px 0；
}
开始彩色的李{
颜色：# 424242；
浮点数：左；
字体大小：16px；
字体粗细：粗体；
身高：24px；
左：27px填充；
6px垫上；
职位：相对；
文字装饰：无；
边境：1px solid # bfc1c6；
边界半径：5px；
-moz边界半径：5px；
WebKit的蛀虫半径：5px；
边界半径：5px；
}
一开始，李一个img {色。
身高：16px；
左：7px；
右边距：7px；
位置：绝对；
上图：7px；
宽度：16px；
边界：无；
}
一开始，彩色李跨度{
显示块；
身高：22px；
填充右：7px；
溢出：隐藏； / *宽度：70px；添加宽度在这里如果你想要所有
}
span.site {
字体大小：14px；
行高：20px；
}
一开始，李a.email {色。
背景：-moz线性梯度（# ff6666，# cc0000 10%，# c40202）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# ff6666），颜色停止（。10，# cc0000），（1））；
颜色：# f3f3f3；
边境：1px solid # c40202；
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# ff6666 '，endcolorstr =# c40202 '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# ff6666 '，endcolorstr =# c40202 '）； / * * / IE8
}
李：一开始的颜色。hover.email {
背景：-moz线性梯度（# c40202，# cc0000 1%，# e03434 10%，# e03434）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# c40202），颜色停止（。01，# cc0000），和（（1））。
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# c40202 '，endcolorstr =# e03434 '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# c40202 '，endcolorstr =# e03434 '）； / * * / IE8
}
一开始，李a.linkedin {色。
背景：-moz线性梯度（# 7cd0fb，# 38a5dc 10%，# 2c83ae）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# 7cd0fb），颜色停止（。10，# 38a5dc），颜色停止（1，））；
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 7cd0fb '，endcolorstr =# 2c83ae '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 7cd0fb '，endcolorstr =# 2c83ae '）； / * * / IE8
颜色：# f3f3f3；
边境：1px solid # 2c83ae；
}
李：一开始的颜色。hover.linkedin {
背景：-moz线性梯度（# 2c83ae，# 38a5dc 1%，# 41b9f6 10%，# 41b9f6）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# 2c83ae），颜色停止（。01，# 38a5dc），和（（1））。
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 2c83ae '，endcolorstr =# 41b9f6 '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 2c83ae '，endcolorstr =# 41b9f6 '）； / * * / IE8
}
一开始，李a.facebook {色。
背景：-moz线性梯度（# 7aa3f7，# 4c72c3 10%，# 3b5998）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# 7aa3f7），颜色停止（。10，# 4c72c3），（1））；
Filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr='#7aa3f7', endColorstr='#3b5998'); / * * / IE6 IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 7aa3f7 '，endcolorstr =# 3b5998 '）； / * * / IE8
颜色：# f3f3f3；
边境：1px solid # 3b5998；
}
李：一开始的颜色。hover.facebook {
背景：-moz线性梯度（# 3b5998，# 4c72c3 1%，# 5c8aea 10%，# 5c8aea）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# 3b5998），颜色停止（。01，# 4c72c3），和（1），
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 3b5998 '，endcolorstr =# 5c8aea '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 3b5998 '，endcolorstr =# 5c8aea '）； / * * / IE8
}
一开始Li a.twitter {色。
背景：-moz线性梯度（# 8ae0fd，# 24bce6 10%，# 1e9ec1）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# 8ae0fd），颜色停止（。10，# 24bce6），颜色停止（1，））；
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 8ae0fd '，endcolorstr =# 1e9ec1 '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 8ae0fd '，endcolorstr =# 1e9ec1 '）； / * * / IE8
颜色：# f3f3f3；
边境：1px solid # 1e9ec1；
}
李：一开始的颜色。hover.twitter {
背景：-moz线性梯度（# 1e9ec1，# 24bce6 1%，# 33ccff 10%，# 33ccff）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# 24bce6），颜色停止（。01，# 33ccff），和（1），
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 1e9ec1 '，endcolorstr =# 33ccff '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# 1e9ec1 '，endcolorstr =# 33ccff '）； / * * / IE8
}
一开始，李a.flickr {色。
背景：-moz线性梯度（# fc75ba，# e10374 10%，# c10263）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# fc75ba），颜色停止（。10，# e10374），（1））；
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# fc75ba '，endcolorstr =# c10263 '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# fc75ba '，endcolorstr =# c10263 '）； / * * / IE8
颜色：# f3f3f3；
边境：1px solid # c10263；
}
李：一开始的颜色。hover.flickr {
背景：-moz线性梯度（# c10263，# e10374 1%，# ff0283 10%，# ff0283）；
背景：-webkit-gradient（线性，左上，左下，色站（0，# c10263），颜色停止（。01，# e10374），和（（1））。
过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# fc75ba '，endcolorstr =# ff0283 '）； / * * / IE6，IE7
MS过滤器：ProgID：DXImageTransform.Microsoft.gradient（梯度型= 0，startcolorstr =# fc75ba '，endcolorstr =# ff0283 '）； / * IE8