How we can create a fixed social share widget using only HTML CSS? Solution: See this CSS Fixed Social Media Sidebar With Icons, HTML CSS Share Widget.
Previously I have shared floating social share buttons, but this a fixed sidebar widget which commonly used by many websites. Basically, this is a kind of WordPress plugin which create the same type of social sharing widget. You will see mostly that kind of sharing button on many websites, because this design is the default form of many plugins.
Today you will learn to create HTML CSS Share Widget with fixed position. Basically, here is sidebar or side place element on left-middle position and there are some social media icons like facebook, twitter, dribble, GitHub, etc. All icons are grey in color by default but on hover, it becomes with original color and there will appear a tooltip for informing which network is it.
So, Today I am sharing CSS Fixed Social Media Sidebar With Icons. This design completely based on HTML and CSS, you can call is a pure CSS program. This is just a design concept you have put URL format inside hyperlink for sharing content live, you must have backend integration for fetch URL.
If you are thinking now how this social widget actually is, then see the preview given below.
Preview Of HTML CSS Share Widget
See this video preview to getting an idea of how this sidebar looks like.
Now you can see this visually, you can also see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Pure CSS Modal Box Card
- Aspect Ratio Maintain with Flex
- HTML CSS Stylish Blockquote
- Floating Social Share Buttons
CSS Fixed Social Media Sidebar With Icons Source Code
Before sharing source code, let’s talk about it. First I have created a list using HTML <ul> & <li> tags, and put a hyperlink and a span on every li section. In the hyperlink tags I have placed class name for icons and inside the span placed the name which works as a tooltip. For placing the icons I have used a font family named entypo with welovefonts API (get).
Now using CSS I have placed the element on left middle position, and used CSS @import for getting a google font and the icons. Now put some values like the color on hover, show tooltip, etc. For fixing the placement I have used CSS position: fixed; command. Left all other things you will understand after getting the codes, I can’t explain in writing.
For creating this widget 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 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Fixed Social Sidebar | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link rel="stylesheet" href="./style.css"> </head> <body> <ul id="social-sidebar"> <li> <a class="entypo-twitter"><span>Tweeter</span></a> </li> <li> <a class="entypo-facebook"><span>Facebook</span></a> </li> <li> <a class="entypo-gplus"><span>Google+</span></a> </li> <li> <a class="entypo-dribbble"><span>Dribbble</span></a> </li> <li> <a class="entypo-dropbox"><span>Dropbox</span></a> </li> <li> <a class="entypo-github"><span>Github</span></a> </li> <li> <a class="entypo-evernote"><span>Evernote</span></a> </li> </ul> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
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 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); @import url(https://weloveiconfonts.com/api/?family=entypo); [class^="entypo-"]:before { font-family: 'entypo', sans-serif; } body { background: #e6e6e6; } #social-sidebar { left: 0; position: fixed; top: 30%; } #social-sidebar li:first-child a { border-top-right-radius: 5px; } #social-sidebar li:last-child a { border-bottom-right-radius: 5px; } #social-sidebar a { background: rgba(0, 0, 0, .7); color: #fff; text-decoration: none; display: block; height: 50px; width: 50px; font-size: 24px; line-height: 50px; position: relative; text-align: center; cursor: pointer; } #social-sidebar a:hover span { left: 120%; opacity: 1; } #social-sidebar a span { font: 12px "Open Sans", sans-serif; text-transform: uppercase; border-radius: 3px; line-height: 24px; left: -100%; margin-top: -16px; opacity: 0; padding: 4px 8px; position: absolute; transition: opacity .3s, left .4s; top: 50%; z-index: -1; } #social-sidebar a span:before { content: ""; display: block; height: 8px; width: 8px; left: -4px; margin-top: -4px; position: absolute; top: 50%; transform: rotate(45deg); } #social-sidebar a[class*="twitter"]:hover, #social-sidebar a[class*="twitter"] span, #social-sidebar a[class*="twitter"] span:before {background: #00aced;} #social-sidebar a[class*="facebook"]:hover, #social-sidebar a[class*="facebook"] span, #social-sidebar a[class*="facebook"] span:before {background: #3B5998;} #social-sidebar a[class*="gplus"]:hover, #social-sidebar a[class*="gplus"] span, #social-sidebar a[class*="gplus"] span:before {background: #E34429;} #social-sidebar a[class*="dribbble"]:hover, #social-sidebar a[class*="dribbble"] span, #social-sidebar a[class*="dribbble"] span:before {background: #ea4c89;} #social-sidebar a[class*="dropbox"]:hover, #social-sidebar a[class*="dropbox"] span, #social-sidebar a[class*="dropbox"] span:before {background: #8DC5F2;} #social-sidebar a[class*="github"]:hover, #social-sidebar a[class*="github"] span, #social-sidebar a[class*="github"] span:before {background: #9C7A5B;} #social-sidebar a[class*="evernote"]:hover, #social-sidebar a[class*="evernote"] span, #social-sidebar a[class*="evernote"] span:before {background: #6BB130;} |
That’s It. Now you have successfully created CSS Fixed Social Media Sidebar With Icons, HTML CSS Share Widget. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
hi, firstly thank you for this great design, unfortunately i seem to be having an issue with the icons not showing….. everything else works fine
Hello there, l seem to have the same problem with icons not working what can l do.
Hi for people asked for icons issues :
You might to add this in your css :
/* Add icon that you want, the content code is available in the demo above*/
.entypo-twitter:before {
content: “\f309”;
}
.entypo-facebook:before {
content: “\f30c”;
}
@font-face {
font-family: ‘entypo’;
font-style: normal;
font-weight: normal;
src: url(‘https://weloveiconfonts.com/api/fonts/entypo/entypo.eot’);
src: url(‘https://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix’) format(‘eot’),
url(‘https://weloveiconfonts.com/api/fonts/entypo/entypo.woff’) format(‘woff’),
url(‘https://weloveiconfonts.com/api/fonts/entypo/entypo.ttf’) format(‘truetype’),
url(‘https://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo’) format(‘svg’);
}
Then it will work well 😉