Social Media Share buttons are an important part of every website. It helps our website viewers and readers to connect with us via many platforms. Generally, websites have social media share buttons on top header and footer.
So people use to scroll up and scroll down to find the social media icons/buttons. This kinds of social media sharing buttons are not much effective, because it is invisible most of the time on the screen. So today we'll see the Fixed Social Media Share Buttons.
These buttons are permanently fixed in the middle of the screen. And it is responsive too. Many newbies web developers and designers look for How To Add Social Media Share Button on the website?
So today you'll get the beautiful solution of How to Add Floating Social Media Buttons to Website. Many bloggers download the plugins to add Social Media Sharing Buttons on their blog/website.
And these plugins make the website heavy and the website takes a long time to load in a web browser. Because most plugins contain HTML, CSS along with JavaScript and jQuery But our Social Media Share Buttons are too light.
These are built-in pure HTML and CSS. You can add these Floating and Fixed Social Media Share Button in your Blogger website, WordPress website, etc. These works with hover effects. These are the few lines of code.
Just add this HTML design and CSS in your website.
See this Preview of Fixed and Floating Social Media Share Button
CSS Fixed & Floating Social Media Share Button with Source Code
Let's understand the source code.
I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.
- I created the basic design in HTML. Then I placed social media icons in <a> tag in a divesion <div>. Then I gave position:fixed and other CSS to locate the vertically center to this division
- I gave descriptive ID to the each icon's parent <a> tag. And a common class my-social to the each icon.
- I applied the appropriate CSS for colors, margins, and padding to all icons.
- I gave float:right to the all icons for the maintain the reverse order of the tabindex.
- I selected to the all <a> tags except the first one using this selector #social-share a:not(:first-child)
- I defined the CSS3 Keyframe Animation for the fade-in effect. I used 4 different CSS3 Keyframe Animation Code for supports to all browsers.
- Then I used the hover effect CSS by selecting the <a> element except first child.
Above is the summary of understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.
SocialShare.html
<!DOCTYPE html>
<!-- Code by CodingTuting.Com Jignesh Panchal -->
<html>
<head>
<title>Social Share</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="social-share">
<a href="#" title="Social Share" id="share">
<i class="fas fa-share-alt my-social"></i>
</a>
<a href="#YWhatsapp url" target="_blank" title="Instagram" id="instagram">
<i class="fab fa-instagram my-social"></i>
</a>
<a href="#YReddit url" target="_blank" title="Reddit" id="reddit">
<i class="fab fa-reddit-alien my-social"></i>
</a>
<a href="#YLinkedin url" target="_blank" title="Linkedin" id="linkedin">
<i class="fab fa-linkedin-in my-social"></i>
</a>
<a href="#YWhatsapp url" target="_blank" title="Whatsapp" id="whatsapp">
<i class="fab fa-whatsapp my-social"></i>
</a>
<a href="#Ytwitter url" target="_blank" title="Twitter" id="twitter">
<i class="fab fa-twitter my-social"></i>
</a>
<a href="#Yfacebook url" target="_blank" title="Facebook" id="facebook">
<i class="fab fa-facebook-f my-social"></i>
</a>
</div>
</body>
</html>
Style.css
/* CSS Code by CodingTuting.Com Jignesh Panchal */
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#social-share {
position: fixed;
right: 0px;
top: 50%;
z-index:10;
}
#social-share a {
text-decoration: none;
float: right;
}
#social-share a:not(:first-child) {
animation:fadeOut 0.5s;
display: none;
}
#social-share:hover a:not(:first-child) {
display: inline;
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
-o-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
#social-share:hover .fa-share-alt {
border-radius: 0px;
}
#social-share a .my-social {
border-right: 0;
}
#social-share a .fa-facebook-f {
padding: 8px 12px;
color: #3F51B5;
border-radius: 3px 0px 0px 3px;
}
#social-share a .fa-twitter {
color:#87ceeb;
}
#social-share a .fa-whatsapp {
color:#008000;
}
#social-share a .fa-linkedin-in {
color:#607d8b;
}
#social-share a .fa-reddit-alien {
color:#ff6c00;
}
#social-share a .fa-instagram {
color:#ff1740;
padding: 8px 11px;
}
#social-share > a > .fa-share-alt {
color: #2196f3;
border-right: 0;
padding: 8px 10px;
border-radius: 3px 0px 0px 3px;
}
#social-share #facebook:focus > .fa-facebook-f, #social-share .fa-facebook-f:hover {
background-color: #3F51B5;
border-color:#3F51B5;
color: #fff;
}
#social-share #twitter:focus > .fa-twitter, #social-share .fa-twitter:hover {
background-color:#87ceeb;
border-color: #87ceeb;
color:#fff;
}
#social-share #whatsapp:focus > .fa-whatsapp, #social-share .fa-whatsapp:hover {
background-color:#008000;
border-collapse: #008000;;
color:#fff;
}
#social-share #linkedin:focus > .fa-linkedin-in, #social-share .fa-linkedin-in:hover {
background-color:#607d8b;
border-collapse: #607d8b;;
color:#fff;
}
#social-share #reddit:focus > .fa-reddit-alien, #social-share .fa-reddit-alien:hover {
background-color:#ff6c00;
border-collapse: #ff6c00;;
color:#fff;
}
#social-share #instagram:focus > .fa-instagram, #social-share .fa-instagram:hover {
background-color:#ff1740;
border-collapse: #ff1740;
color:#fff;
}
#social-share #share:focus > .fa-share-alt, #social-share .fa-share-alt:hover {
color: #fff;
background-color: #2196f3;
border-color: #2196f3;
}
.my-social {
font-size: 1.5em;
border: 1px solid #3F51B5;
padding: 8px 10px;
cursor: pointer;
transition: all 0.4s ease-out;
-webkit-transition: all .4s ease-out;
-moz-o-trasition: all .4s ease-out;
-o-trasition: all .4s ease-out;
}
We hope you got - How to Add Social Media Share Button in Website. If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.
Sharing is Caring
Thanks for Reading
- social media sharing buttons html
- social media sharing buttons for blogger
- social media icons html generator
- add social media buttons html
- css animation fade in
- css hover effects
- add social share button html
- how to add social media share button in wordpress
- add social media share buttons to blogger
- add social media share buttons to your website
- wordpress social share buttons