Top social sharing button implemented by pure CSS3 and css3 social sharing button

Top social sharing button implemented by pure CSS3 and css3 social sharing button

Today, I want to share a social sharing button implemented by pure CSS3, which is placed on the top of the webpage. You can choose to fix it on the top of the webpage, which is very convenient for users to share content. The icon files of these social sharing buttons come from the font files of google and bootstrap, including the logo icons of a large social networking website. You can take a look at them first:

It looks very good. It looks very special and the icons are concise and clear.

You can also directly view the DEMO of this social sharing button.

Next let's take a look at the source code. The source code is also very simple, mainly composed of HTML code and CSS code. Let's take a look at the HTML Structure Code:

<div class="social">    <span class="line"></span>    <ul>        <li class="facebook">            <a href="#" target="_blank">                <i class="fa fa-facebook fa-2x"></i>            </a>        </li>        <li class="twitter">            <a href="#" target="_blank">                <i class="fa fa-twitter fa-2x"></i>            </a>        </li>        <li class="codepen">            <a href="#" target="_blank"></a>        </li>        <li class="youtube">            <a href="#" target="_blank">                <i class="fa fa-youtube fa-2x"></i>            </a>        </li>        <li class="instagram">            <a href="#" target="_blank">                <i class="fa fa-instagram fa-2x"></i>            </a>        </li>        <li class="pinterest">            <a href="#" target="_blank">                <i class="fa fa-pinterest fa-2x"></i>            </a>        </li>        <li class="github">            <a href="#" target="_blank">                <i class="fa fa-github fa-2x"></i>            </a>        </li>        <li class="flickr">            <a href="#" target="_blank">                <i class="fa fa-flickr fa-2x"></i>            </a>        </li>        <li class="linkedin">            <a href="#" target="_blank">                <i class="fa fa-linkedin fa-2x"></i>            </a>        </li>    </ul></div>

Here we mainly use the ul li list structure. Every li defines the corresponding class. For example, the first class is defined as "facebook". In the subsequent css, style definitions will be made for facebook classes, which will be very convenient.

Then let's look at the CSS code, which is also relatively simple:

@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400);@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

First, the font files of google and bootstrap are introduced. The following two files can be used to render small icons of buttons.

.social .line {    position: absolute;    top: 0; left: 0px;    width: 100%; height: 5px;    background: #fced00;    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);    z-index: 0;}.social ul {    position: fixed;    left: 50%; margin-left: -216px;    list-style: none;    color: #000;}.social ul li {    float: left;}.social ul li a {    position: relative;    float: left;    background: #fff000;    width: 48px; height: 48px;    text-align: center;    color: #000;    padding: 0 0 30px 0;}.social ul li a:hover {    color: #fff;}.fa-facebook, .fa-twitter, .fa-youtube, .fa-instagram, .fa-pinterest, .fa-github, .fa-flickr, .fa-linkedin {    padding: 10px 0 0 0;}

The above section mainly defines the overall appearance of the entire button control, including settings such as the margins of each button item.

.social ul li.facebook a:hover {    background: #3b5998;}.social ul li.twitter a:hover {    background: #44ccf6;}.social ul li.codepen a:hover {    background: #cccccc;}.social ul li.youtube a:hover {     background: #da2d2e; }.social ul li.instagram a:hover {     background: #66269e; }.social ul li.pinterest a:hover {    background: #c3042b;}.social ul li.github a:hover {    background: #000000;}.social ul li.flickr a:hover {    background: #72858c;}.social ul li.linkedin a:hover {    background: #1c66c2; }

This code mainly sets the background color for each button to move the mouse over. The background color of each button is different, which looks colorful and beautiful.