Use css3 for social sharing and css3 for social interaction

Use css3 for social sharing and css3 for social interaction

Previously, Buttons were generally implemented using images. In particular, some Buttons with texture are used. Today I have practiced some examples and used css3 to implement 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"> email </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 {
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 (. 10, # 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 (. 01, # cc0000), color-stop (. 10, # 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 (. 10, # 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 (. 01, # 38a5dc), color-stop (. 10, #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, # 4c72c310%, #3b5998 );
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #7aa3f7), color-stop (. 10, #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 (. 01, #4c72c3), color-stop (. 10, # 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 (. 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%, #33 ccff 10%, #33 ccff );
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0, #24bce6), color-stop (. 01, #33 ccff), color-stop (. 10, #33 ccff), color-stop (1, #33 ccff ));
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 */}

 

Preview in firefox and chrome as follows:

Preview the effect in ie9:

In ie6/7/8, the preview effect is as follows:

 

How does css3 + html load the display animation instead of clicking a button to achieve the effect?

When loading the page, a js script is automatically loaded and the button is clicked.
 
What do you know about soft ship training?

HTML5/CSS3 is the button special effects that can be used to write web pages. It is very practical. If you don't quite understand it, You can first understand the relationship between htmlhe and css. This is the programming knowledge.