Learn How To Create a Sticky Social Media Bar

In this tutorial, I am going to create a Sticky Social Media Clickable Button Bar using CSS without impacting website design and we I am not using any java script. One can use this code using bootstrap 3 or 4 , foundation or any other framework.

Sticky Social Media Bar Screen shot

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SideBar Sticky</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
@import url(https://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: "entypo", sans-serif;
}
#sticky-social a {
text-decoration: none;
text-align:center;
}
#sticky-social ul {
list-style: none;
margin: 0;
padding: 0;
}

#sticky-social {
left: 0;
position: fixed;
top: 15%;
z-index: 2500;
}
#sticky-social a {
//position: absolute;
width: 78px;
background: #333;
color: #fff;
display: block;
height: 75px;
font: 20px "Roboto", sans-serif;
line-height: 60px;
position: relative;
text-align: center;
left:0;
transition: width .3s;
}
#sticky-social a span {
line-height: 75px;
left: -160px;
position: absolute;
text-align:center;
width:160px;

}

#sticky-social a:hover {
left: 100%;
width:160px;
}
#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover,
#sticky-social a[class*="facebook"] span { background: #3b5998; }

#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover,
#sticky-social a[class*="twitter"] span { background: #00aced; }

#sticky-social a[class*="gplus"],
#sticky-social a[class*="gplus"]:hover,
#sticky-social a[class*="gplus"] span { background: #dd4b39; }

#sticky-social a[class*="linkedin"],
#sticky-social a[class*="linkedin"]:hover,
#sticky-social a[class*="linkedin"] span { background: #007bb6; }

#sticky-social a[class*="instagrem"],
#sticky-social a[class*="instagrem"]:hover,
#sticky-social a[class*="instagrem"] span { background: #517fa4; }

#sticky-social a[class*="stumbleupon"],
#sticky-social a[class*="stumbleupon"]:hover,
#sticky-social a[class*="stumbleupon"] span { background: #eb4924; }

#sticky-social a[class*="pinterest"],
#sticky-social a[class*="pinterest"]:hover,
#sticky-social a[class*="pinterest"] span { background: #cc2127; }

#sticky-social a[class*="flickr"],
#sticky-social a[class*="flickr"]:hover,
#sticky-social a[class*="flickr"] span { background: #ff0084; }

#sticky-social a[class*="tumblr"],
#sticky-social a[class*="tumblr"]:hover,
#sticky-social a[class*="tumblr"] span { background: #32506d; }

.entypo-gplus::after {
content: "Google Plus";
font-family: 'Roboto';
margin-top: 25px;
font-size: 10px;
position: absolute;
width: 100%;
text-align: center;
left: 0px;
}

.entypo-twitter::after {
content: "Twitter";
font-family: 'Roboto';
margin-top: 25px;
font-size: 10px;
position: absolute;
width: 100%;
text-align: center;
left: 0px;
}
.entypo-facebook::after {
content: "Like Us";
font-family: 'Roboto';
margin-top: 25px;
font-size: 10px;
position: absolute;
width: 100%;
text-align: center;
left: 0px;
}

@media (max-width:1200px){
#sticky-social{
display:none;
}
}
</style>
</head>
<body>
<div style="height:1024px;"><h1>Sticky Social Button</h1></div>
<div id="sticky-social">
<ul>
<li><a href="#" class="entypo-gplus" target="_blank"><span>Google Plus</span></a></li>
<li><a href="#" class="entypo-twitter" target="_blank"><span>Twitter</span></a></li>
<li><a href="#" class="entypo-facebook" target="_blank"><span>Facebook</span></a></li>
</ul>
</div>
</body>
</html>

If you like my post then please share this post so other people can view this .