SharingIsSexy-Social-Icon-WordPress-Blogger

SharingIsSexy-WordPress-Blogger.html

<style type="text/css">
.fix-container{
	padding: 0px;
	margin: 0px;
	position: fixed;
	right: -119px;
	top:130px;
	width: 200px;
	}
.fix li{
	list-style-type: none;
	background-color: #00A0CF;
	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;
	border-radius: 25px;
	cursor: pointer;
	filter: gray; 
        -webkit-filter:  grayscale(1) opacity(1)saturate(5.1);
	}
.fix 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: #00A0CF;
        -webkit-filter: grayscale(0%);
        transform: rotate(360deg);
        transition: all 0.3s ease-in-out 0s;
      }
.fix li img{
	float: left;
	margin: 5px 5px;
	margin-right: 10px;
	border-radius: 50%;
	}
.fix li p{
	padding: 0px;
	margin: 0px;
	text-transform: uppercase;
        background-color: #00A0CF;
        border-radius: 25px;
	line-height: 43px;
	}
</style>
	<div class="fix-container">
		<ul class="fix">
			<li>
				<img width="32" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/fb.png" />
				<p>Facebook</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/tw.png" />
				<p>Twitter</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/pin.png" />
				<p>Pinterest</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/rss.png" />
				<p>RSS</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/tm.png" />
				<p>Tumblr</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/wp.png" />
				<p>WordPress</p>
			</li>
			<li>
				<img width="30" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/vm.png" />
				<p>Vimeo</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://works.tricksway.com/SharingIsSexy/img/li.png" />
				<p>Linkedin</p>
			</li>
		</ul>
	</div>