JSFiddle - React, Tailwind, and code Playground

Social Links - Right Page Side - Hover effect

by Jennifer Perrin

HTML

<div class="staticbar">
<div class="login">
<div id="rt-login-button">
<a class="loginbtn buttontext" href="#" rel="nofollow" target="_blank" title="Login Blogger">
<span class="desc">Blogger Login</span></a>
</div>
<div class="clear"></div>
</div>
<div class="rt-social-buttons">

<a href="#" id="rt-twitter-btn" rel="nofollow" title="Twitter Om-Dayz">
<span>Twitter</span></a>
	
<a href="#" id="rt-facebook-btn" rel="nofollow" title="Facebook Om-Dayz">
<span> Facebook</span></a>
	
<a href="#" id="rt-buzz-btn" rel="nofollow" target="_blank" title="Google Plus Om-Dayz">
<span>Google Plus</span></a>
	
<a href="http://feeds.feedburner.com/om-dayz" id="rt-rss-btn" rel="nofollow" target="_blank" title="RSS Om-Dayz">
<span>Subscribe to RSS Feed</span></a>
</div>
</div>

CSS

body {
    background: url("http://1.bp.blogspot.com/-WF6PxTC2ZOU/UB4mqDgiW1I/AAAAAAAABSs/0pJnDzyX97Q/s1600/texturewow.png") repeat scroll 0% 0% black;
    color: #E6E6E6;
    font: 13px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;
}

/* social button */
.staticbar {
    position: fixed;
    right: 0;
    top: 15%;
    width: 25px;
    animation:static-bar .8s;
    -moz-animation:static-bar .8s; 
    -webkit-animation:static-bar .8s;
}

.staticbar:hover {z-index: 1000;}

.rt-social-buttons a, .loginbtn {
    background: none repeat scroll 0 0 rgb(34, 34, 34);
    background-repeat: no-repeat;
    display: block;
    height: 20px;
    margin-bottom: 3px;
    padding: 4px 0 4px 4px;
    right: 0px;
    width: 140px;
    position: relative;
    -moz-border-radius: 3px 0px 0px 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    -khtml-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    background-position: 4px 4px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border:1px solid rgb(51, 51, 51);
}

.rt-social-buttons span, .loginbtn span {
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    font-size: 10px;
    height: 18px;
    letter-spacing: -1px;
    line-height: 1.9em;
    padding-left: 10px;
    text-transform: uppercase;
    text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);
}

.rt-social-buttons a:hover, .loginbtn:hover {
    background: none repeat scroll 0 0 rgb(150, 0, 0);
    border:1px solid rgb(70, 0, 0);
    right: 119px;
}

.rt-social-buttons a#rt-buzz-btn span {
background-image: url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);background-position:-2px -68px;
}

.rt-social-buttons a#rt-twitter-btn span {
background-image:...