htm css social share buttons

How we can create floating social media sharing icons using HTML & CSS? Solution: CSS Social Share Buttons, HTML CSS Floating Social Media Icons.

I am sure that know about social media sharing buttons. Many types of sharing buttons available, but 2-3 types of most peoples use. Some peoples use fixed button before or after content, & some use widgets type floating buttons. There are many social sharing services & plugins, you can use easily.

Today I will see a pretty UI based sharing buttons, and with shadow, It looks like material design. The best thing about using these buttons, you can customize easily. Because it is easy to customize or edit. If you use any online service then the file will heavy, & website will take a long time to load. This very lightweight file with few lines of codes & also with icons.

So, Today I am sharing CSS Social Share Buttons with material design & hover effect. This is a pure HTML CSS floating social media sharing buttons with icons. You can call it pure CSS sharing buttons with hover effect. Basically, buttons are expanding or appear on mouse hover, otherwise a single button visible.

If are you thinking now how these floating button actually is, then see the preview given here below.

Preview Of Floating Social Media Icons

See this video preview to getting an idea about how this button looks like.

Now you can see this pure CSS widget visually. If you like this, then get the source code of its.

You May Also Like:

CSS Social Share Buttons With Material Design Source Code

Before sharing source code, let’s talk about it. As you know, I used only HTML & CSS for creating it. And for icons, I used the font-awesome icon library. First I created the main div with class= "sbuttons" & after that, I put 4 icons inside hyperlinks <a>. In 4 divs I put the same class “sbuttons” as I put on the main div.

And also put extra class for giving different color to each icon. I placed in of bottom left using bottom: 5%; & left: 0; property values. You can adjust it as you want, by changing CSS values. I put animation delay and other properties expect the last buttons, which is the main share icon. I selected all icons to expect the last one by using :not(:last-child) CSS property.

Then I placed different transition-delay for every icon. Basically, I selected by order of last to first, and put delay with increasing 20ms. Also, I used CSS tooltip property, Its show information on an object on hover (more info).  I placed the text of the tooltip of perfect position according to buttons. And some other lefts are you will understand after getting the codes.

For creating this social sharing button widgets, you have to create only 2 files. One for HTML, and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

That’s It. Now you have successfully created CSS Social Share Buttons With Material Design. In other words, Pure HTML & CSS floating sharing buttons with hover effect. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

15 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here