Create a Sticky Social Media Bar using HTML and CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky Social Bar with CSS3 Animations</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900">
</head>
<style>
body{
font-family: "Lato";
background-image: linear-gradient( to left, #b63e44, #460768);
}
/*Right Side Buttons Start*/
.sticky-container{
padding: 0px;
margin: 0px;
position: fixed;
right: -119px;
top: 130px;
width: 200px;
}
.sticky li{
list-style-type: none;
background-color: #333;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor: pointer;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(0%);
}
.sticky li:hover{
margin-left: -115px;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
.sticky li img{
float: left;
margin: 5px 5px;
margin-right: 10px;
}
.sticky li p{
float:left;
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;
}
/*Right Side Buttons End*/
/*Left Side Buttons Start*/
.sticky-left-container{
padding: 0px;
margin: 0px;
position: fixed;
left: -158px;
top:70%;
width: 200px;
z-index:2;
}
.sticky-left li{
list-style-type: none;
background-color: none;
color: #efefef;
height: 43px;
padding: 0px;
margin: 0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
-moz-transition:all 0.25s ease-in-out;
-o-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
cursor: pointer;
}
.sticky-left li:hover{
margin-right: -150px;
background:#333;
border-radius: 25px 25px 25px 0;
}
.sticky-left li img{
float: right;
border-radius:50%;
margin: 5px 5px;
margin-left: 10px;
}
.sticky-left li p{
padding: 0px;
float:right;
margin: 0px;
text-transform: uppercase;
line-height: 43px;
}
/*Left Side Buttons End*/
/*Content Start*/
.content{
margin-top: 150px;
margin-left: 100px;
width: 500px;
}
h1, h2{
font-family: "Source Sans Pro",sans-serif;
color: #ecf0f1;
padding: 0px;
margin: 0px;
font-weight: normal;
}
h1{
font-weight: 900;
font-size: 64px;
}
h2{
font-size:26px;
}
p{
color: #ecf0f1;
font-family: "Lato";
line-height: 28px;
font-size: 15px;
}
/*Content End*/
</style>
<body>
<!--Right Side Buttons Start-->
<div class="sticky-container">
<ul class="sticky">
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=1j7LLn1ZuJh_U-Ff4swbYqw41nAbabwWw" />
<p>Facebook</p>
</li>
</a>
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=1qbielCGRqeH480vWlo9UJljepi8wEpWj" />
<p>Twitter</p>
</li>
</a>
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=16M9xr7IZHEzP7V5kZzt1NrliUy-mdhFK" />
<p>Vimeo</p>
</li>
</a>
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=1rXD704smmLePEebevlOoxJDWLFVIm4YB" />
<p>Linkedin</p>
</li>
</a>
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=1PJQzP5sX-ZeokDGZ3pQYunOqe26TCkV7" />
<p>RSS</p>
</li>
</a>
</ul>
</div>
<!--Right Side Buttons End-->
<!--Left Side Buttons Start-->
<div class="sticky-left-container">
<ul class="sticky-left">
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=1yz1jMRdqLQWBx10eFLSWTMGWmKrL9sM6"/>
<p>Phone</p>
</li>
</a>
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=1ha6UAQlGBFXnExIXUMgs2l1QwUNgE09K" />
<p>Whatsapp</p>
</li>
</a>
<a href="#">
<li>
<img width="32" height="32" title="" alt="" src="https://drive.google.com/uc?id=1Jthmdc-CZpBoymeHEW06x9OTj8_lW7gM" />
<p>Email</p>
</li>
</a>
</ul>
</div>
<!--Left Side Buttons End-->
<!--Content Start-->
<div class="content">
<h1>STICKY SOCIAL BAR</h1>
<h2>WITH CSS3 TRANSITIONS & TRANSFORMS</h2>
<p style="color:#c9e914;">CodeWithTanveer</p>
<!--Content End-->
</body>
</html>
0 Comments