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.
We can also directly.
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:
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:
First, the font files of google and bootstrap are introduced. The following two files can be used to render small icons of buttons.
{:;:;:;:;:;:;:;:;}{:;:;:;:;:;}{:;}{:;:;:;:;:;:;:;:;}{:;}{:;}
The above section mainly defines the overall appearance of the entire button control, including settings such as the margins of each button item.
{:;}{:;}{:;}{:; }{:; }{:;}{:;}{:;}{:; }
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.
Finally, share the source code,>