<style type="text/css">
.avdhoot-box {
display:inline-block;
font:normal bold 12px Arial,Sans-Serif;
position:relative;
width:300px;
background-color:#111;
text-align:left;
/* CSS3 Browser */
background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
/* IE only */
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}
.avdhoot-box:before,
.avdhoot-box:after {
content:"";
display:block;
width:0;
height:0;
border:3px solid transparent;
border-width:5px 3px;
border-bottom-color:#999;
position:absolute;
top:25%;
right:5px;
z-index:4;
}
.avdhoot-box:after {
border-color:#999 transparent transparent;
top:auto;
bottom:25%;
}
.avdhoot-box input {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
height:100%;
opacity:0;
z-index:10;
cursor:pointer;
}
.avdhoot-box label {
display:block;
line-height:45px;
color:rgba(255,255,255,.5);
padding:0 15px;
-webkit-transition:all 0s ease-out;
-moz-transition:all 0s ease-out;
-ms-transition:all 0s ease-out;
-o-transition:all 0s ease-out;
transition:all 0s ease-out;
}
.avdhoot-box label:before {
content:attr(data-default);
}
.avdhoot-box label:after {
content:"";
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
width:15px;
border-left:1px solid rgba(0,0,0,.4);
-webkit-border-radius:0 7px 7px 0;
-moz-border-radius:0 7px 7px 0;
border-radius:0 7px 7px 0;
-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.avdhoot-box input:hover + label {
color:white;
}
.avdhoot-box input:hover + label:after {
background-color:rgba(255,255,255,.04);
}
.avdhoot-box ul {
margin:0 0;
padding:0 0;
position:absolute;
top:100%;
left:14px;
right:14px;
background-color:#222;
border:1px solid #111;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
visibility:hidden;
opacity:0;
z-index:99;
}
.avdhoot-box li {
margin:0 0;
padding:0 0;
list-style:none;
float:left;
width:50%;
display:inline;
}
.avdhoot-box a {
display:block;
position:relative;
color:#999;
text-decoration:none;
text-shadow:0 0 2px black;
line-height:30px;
border-top:1px solid #111;
border-right:1px solid #111;
padding:0 15px 0 32px;
-webkit-box-shadow:inset 0 0 0 1px #333;
-moz-box-shadow:inset 0 0 0 1px #333;
box-shadow:inset 0 0 0 1px #333;
/* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.avdhoot-box a:nth-child(even) {
border-right-width:0;
}
.avdhoot-box a:before {
content:"";
display:block;
width:16px;
height:16px;
position:absolute;
top:7px;
left:7px;
background-color:transparent;
background-repeat:no-repeat;
background-position:50% 0;
}
.avdhoot-box a:hover:before {
background-position:50% 100%;
}
.avdhoot-box .social-rss:before {background-image:url('img/social_rss.png');}
.avdhoot-box .social-facebook:before {background-image:url('img/social_facebook.png');}
.avdhoot-box .social-twitter:before {background-image:url('img/social_twitter.png');}
.avdhoot-box .social-google:before {background-image:url('img/social_google.png');}
.avdhoot-box a:hover {
background-color:rgba(0,0,0,.2);
color:#ccc;
}
/* On click, then... */
.avdhoot-box input:checked + label {
color:rgba(255,255,255,.4);
-webkit-transition-duration:.4s;
-moz-transition-duration:.4s;
-ms-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.avdhoot-box input:checked + label:before {
content:attr(data-focus);
}
.avdhoot-box input:checked + label:after {
background-color:rgba(0,0,0,.2);
-webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
-moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.avdhoot-box input:checked ~ ul {
visibility:visible;
opacity:1;
}
</style>
<div class="avdhoot-box">
<input type="checkbox" />
<label data-default="Social Share Bar!" data-focus="Select one of the social media service..."></label>
<ul>
<li><a class="social-rss" href="http://feeds.feedburner.com/USERNAME FEED" target="_blank">RSS Feed</a></li>
<li><a class="social-facebook" href="http://facebook.com/USERNAME FACEBOOK" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="https://twitter.com/USERNAME TWITTER" target="_blank">Twitter</a></li>
<li><a class="social-google" href="https://plus.google.com/USERNAME GOOGLE+" target="_blank">Google+</a></li>
</ul>
</div>