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:
- HTML CSS Star Rating
- CSS Flexible Grid Menu Layout
- Dark & Light Mode In HTML CSS
- Animated Text Reveal In Pure CSS
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>CSS Floting Share Buttons | Webdevtrick.com</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="sbuttons"> <a href="#" target="_blank" class="sbutton whatsapp" tooltip="WhatsApp"><i class="fab fa-whatsapp"></i></a> <a href="#" target="_blank" class="sbutton fb" tooltip="Facebook"><i class="fab fa-facebook-f"></i></a> <a href="#" target="_blank" class="sbutton gplus" tooltip="Google Plus"><i class="fab fa-google-plus-g"></i></a> <a href="#" target="_blank" class="sbutton twitt" tooltip="Twitter"><i class="fab fa-twitter"></i></a> <a href="#" target="_blank" class="sbutton pinteres" tooltip="Pinterest"><i class="fab fa-pinterest-p"></i></a> <a target="_blank" class="sbutton mainsbutton" tooltip="Share"><i class="fas fa-share-alt"></i></a> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ @import url(https://fonts.googleapis.com/css?family=Anton&display=swap); body { height: 100vh; background-size: 100% 100%; font-family: 'Anton', sans-serif; color: #fff; } .sbuttons { bottom: 5%; position: fixed; margin: 1em; left: 0; } .sbutton { display: block; width: 60px; height: 60px; border-radius: 50%; text-align: center; color: white; margin: 20px auto 0; box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15); cursor: pointer; -webkit-transition: all .1s ease-out; transition: all .1s ease-out; position: relative; } .sbutton > i { font-size: 38px; line-height: 60px; transition: all .2s ease-in-out; transition-delay: 2s; } .sbutton:active, .sbutton:focus, .sbutton:hover { box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); } .sbutton:not(:last-child) { width: 60px; height: 60px; margin: 20px auto 0; opacity: 0; } .sbutton:not(:last-child) > i { font-size: 25px; line-height: 60px; transition: all .3s ease-in-out; } .sbuttons:hover .sbutton:not(:last-child) { opacity: 1; width: 60px; height: 60px; margin: 15px auto 0; } .sbutton:nth-last-child(1) { -webkit-transition-delay: 25ms; transition-delay: 25ms; } .sbutton:not(:last-child):nth-last-child(2) { -webkit-transition-delay: 20ms; transition-delay: 20ms; } .sbutton:not(:last-child):nth-last-child(3) { -webkit-transition-delay: 40ms; transition-delay: 40ms; } .sbutton:not(:last-child):nth-last-child(4) { -webkit-transition-delay: 60ms; transition-delay: 60ms; } .sbutton:not(:last-child):nth-last-child(5) { -webkit-transition-delay: 80ms; transition-delay: 80ms; } .sbutton:not(:last-child):nth-last-child(6) { -webkit-transition-delay: 100ms; transition-delay: 100ms; } [tooltip]:before { font-family: 'Roboto'; font-weight: 600; border-radius: 2px; background-color: #585858; color: #fff; content: attr(tooltip); font-size: 12px; visibility: hidden; opacity: 0; padding: 5px 7px; margin-left: 10px; position: absolute; left: 100%; bottom: 20%; white-space: nowrap; } [tooltip]:hover:before, [tooltip]:hover:after { visibility: visible; opacity: 1; } .sbutton.mainsbutton { background: #2ab1ce; } .sbutton.gplus { background: #F44336; } .sbutton.pinteres { background: #e60023; } .sbutton.twitt { background: #03A9F4; } .sbutton.fb { background: #3F51B5; } .sbutton.whatsapp { background: #00e676; } |
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.
Such a nice social media icon animation
Thank you very much, Traun!
Hey bro with out the actual backend code this share button blog is useless
I know bro, This is only UI. You can add backend features in it.
Nice..
Thank you very much Jai.
This code set in blogger
Yes / No
Plz told me
Yes, But you have to create a main div and put the values I have put in the body section.
This is Cool.
Thanks
Hello Buddy.
The problem is here that the icons don’t load up!
how do I solve it?
have you linked font-awesome icon library in head section?
when i hover on sbuttons area (even if they are non visible) they pop up on mobile screen, Please give solution brother ASAP.I tried alot.. waiting.. Thanks
can make it’s to be responsive, i wanna put on mobile version.
i already tried but some problem with zone area of button look like too sensitive
how can that be done for blogger sites http://www.jpeeiclinic.com i want left floating