Creating A Sticky Social Share Bar with CSS3 Transitions and Transforms

Preview:

Description:

In this post we’re going to create an animated social share bar sticky at the right/left side of your web page, with smooth hover over animations based on CSS3 transitions and transforms. No JS required.

Usage:

Create the Html for the sticky social share bar following the structure like this:

<div class="sticky-container">
<ul class="sticky">
<li> <img width="32" height="32" title="" alt="" src="img/fb1.png" />
<p>Facebook</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/tw1.png" />
<p>Twitter</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/pin1.png" />
<p>Pinterest</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/li1.png" />
<p>Linkedin</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/rss1.png" />
<p>RSS</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/tm1.png" />
<p>Tumblr</p>
</li>
<li> <img width="32" height="32" title="" alt="" src="img/wp1.png" />
<p>WordPress</p>
</li>
<li> <img width="30" height="32" title="" alt="" src="img/vm1.png" />
<p>Vimeo</p>
</li>
</ul>
</div>

The CSS rules to style and animate the social bar.

.sticky-container {
/*background-color: #333;*/
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(100%);
}
.sticky li:hover {
margin-left: -115px;
/*-webkit-transform: translateX(-115px);
		-moz-transform: translateX(-115px);
		-o-transform: translateX(-115px);
		-ms-transform: translateX(-115px);
		transform:translateX(-115px);*/
		/*background-color: #8e44ad;*/
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 {
padding: 0px;
margin: 0px;
text-transform: uppercase;
line-height: 43px;
}

That’s it. Free free to edit CSS styles to create your own styles.