Use CSS3 to implement social sharing buttons

Previously implemented buttons are generally implemented with pictures, especially some have texture buttons, today practiced a number of related aspects of the example, with CSS3 to achieve social Media Buttons

The HTML code is as follows

<div class= "outset-colored" >
<ul>
<li> <a href= "" title= "My e-mail" class= "email" > <span class= "Site" >E-Mail</span> </a> </li>
<li> <a href= "#" title= "My LinkedIn page" class= "LinkedIn" > <span class=" Site ">LinkedIn</span> </a> </li>
<li> <a href= "#" title= "My Facebook page" class= "Facebook" > <span class=" Site ">Facebook</span> </a> </li>
<li> <a href= "#" title= "My Twitter page" class= "Twitter" > <span class=" Site ">Twitter</span> </a> </li>
<li> <a href= "#" title= "My Flickr page" class= "Flickr" > <span class=" Site ">Flickr</span> </a> </li>
</ul>
</div>

The CSS code is as follows

* {
margin:0;
padding:0;
}
. outset-colored {
Font-family:helvetica, Verdana, Arial, Sans-serif;
font-size:14px;
List-style-type:none;
margin:10px 0 0 10px;
}
. outset-colored UL {
List-style-type:none;
Display:block;
}
. outset-colored Li {
Float:left;
height:30px;
margin:0 8px 7px 0;
}
. outset-colored Li a {
Color: #424242;
Float:left;
font-size:16px;
Font-weight:bold;
height:24px;
padding-left:27px;
padding-top:6px;
position:relative;
Text-decoration:none;
border:1px solid #bfc1c6;
border-radius:5px;

-moz-border-radius:5px;
-webkit-borer-radius:5px;
border-radius:5px;
}
. outset-colored Li a img {
height:16px;
left:7px;
margin-right:7px;
Position:absolute;
top:7px;
width:16px;
Border:none;
}
. outset-colored Li a span {
Display:block;
height:22px;
padding-right:7px;
overflow:hidden;/*width:70px; Add a width here if you want all the buttons to be the same size.*/
}
Span.site {
font-size:14px;
line-height:20px;
}
. outset-colored Li A.email {
Background:-moz-linear-gradient (#ff6666, #cc0000 10%, #c40202);
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #ff6666), Color-stop (. Ten, #cc0000), Color-stop (1, #c40202));
Color: #f3f3f3;
border:1px solid #c40202;
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= ' #ff6666 ', endcolorstr= ' #c40202 ' ); /* IE6 & IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #ff6666 ', endcolorstr= ' # c40202 ') "; /* IE8 */
}
. outset-colored Li A:hover.email {
Background:-moz-linear-gradient (#c40202, #cc0000 1, #e03434 10%, #e03434);
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #c40202), Color-stop (., #cc0000), Color-stop (. Ten, #e03434), Color-stop (1, #e03434));
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= ' #c40202 ', endcolorstr= ' #e03434 ' ); /* IE6 & IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #c40202 ', endcolorstr= ' # e03434 ') "; /* IE8 */
}
. outset-colored Li A.linkedin {
Background:-moz-linear-gradient (#7cd0fb, #38a5dc 10%, #2c83ae);
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #7cd0fb), Color-stop (. Ten, #38a5dc), Color-stop (1, #2c83ae));
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= ' #7cd0fb ', endcolorstr= ' #2c83ae ' ); /* IE6 & IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #7cd0fb ', endcolorstr= ' # 2c83ae ') "; /* IE8 */
Color: #f3f3f3;
border:1px solid #2c83ae;
}
. outset-colored Li A:hover.linkedin {
Background:-moz-linear-gradient (#2c83ae, #38a5dc 1, #41b9f6 10%, #41b9f6);
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #2c83ae), Color-stop (., #38a5dc), Color-stop (. Ten, #41b9f6), Color-stop (1, #41b9f6));
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= ' #2c83ae ', endcolorstr= ' #41b9f6 ' ); /* IE6 & IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #2c83ae ', endcolorstr= ' # 41b9f6 ') "; /* IE8 */
}
. outset-colored Li A.facebook {
Background:-moz-linear-gradient (#7aa3f7, #4c72c3 10%, #3b5998);
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #7aa3f7), Color-stop (. Ten, #4c72c3), Color-stop (1, #3b5998));
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= ' #7aa3f7 ', endcolorstr= ' #3b5998 ' ); /* IE6 & IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #7aa3f7 ', endcolorstr= ' # 3b5998 ') "; /* IE8 */
Color: #f3f3f3;
border:1px solid #3b5998;
}
. outset-colored Li A:hover.facebook {
Background:-moz-linear-gradient (#3b5998, #4c72c3 1, #5c8aea 10%, #5c8aea);
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #3b5998), Color-stop (. #4c72c3), Color-stop (. Ten, #5c8aea), Color-stop (1, #5c8aea));
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= ' #3b5998 ', endcolorstr= ' #5c8aea ' ); /* IE6 & IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #3b5998 ', endcolorstr= ' # 5c8aea ') "; /* IE8 */
}
. 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 (. Ten, #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 (. #33ccff), Color-stop (. Ten, #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 (. Ten, #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 (., #e10374), Color-stop (. Ten, #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 */}

Preview the following in Firefox and Chrome:

Preview the effect in IE9:

The preview effect in IE6/7/8 is as follows:

Use CSS3 to implement social sharing buttons