Creating A Sticky Social Share Bar with CSS3 Transitions and Transforms

Category: CSS & CSS3 , Social Media | February 7, 2014
Author: hasinhayder
Views Total: 8,289
Official Page: Go to website
Last Update: February 7, 2014
License: MIT

Preview:

Creating A Sticky Social Share Bar with CSS3 Transitions and Transforms

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.

 

You Might Be Interested In:


8 thoughts on “Creating A Sticky Social Share Bar with CSS3 Transitions and Transforms

  1. Alberto Mena

    What about the left side?
    I have try to move it changing some values but dont work correctly :S

    Reply
  2. Digital Products

    how to add link in Fb button and other ? so much confuse and so much try to add the links but fail.
    Please tell me where i add the links like FB Twitter Pinterest etc in button
    put some examples here

    Reply
  3. tehBenny

    Fore anyone who’s still looking and wodering where to put your link code!
    Also, thanks OP for this! <3

    ////// REMOVE THE (REMOVE ME) //////

    Facebook

    Reply

Leave a Reply