Floating Social Bookmark dengan CSS

Friday, December 27, 2013

.floating-bar {
  position:fixed;
  right:0;
  top:35%;
  width:25px;
  animation:static-bar .8s;
  -moz-animation:static-bar .8s;
  -webkit-animation:static-bar .8s;
}

.floating-bar:hover {
  z-index:1000;
}

.social-buttons a,
.login-buttons {
  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:0;
  width:140px;
  position:relative;
  -moz-border-radius:3px 0 0 3px;
  -webkit-border-radius:3px 0 0 3px;
  -khtml-border-radius:3px 0 0 3px;
  border-radius:3px 0 0 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);
}

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

.social-buttons a:hover,
.login-buttons:hover {
  background:none repeat scroll 0 0 #2b2b2b;
  background-position:center;
  border:1px solid #900;
  box-shadow:0 5px 8px -1px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 5px 8px -1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 5px 8px -1px rgba(0,0,0,0.2);
  z-index:9999;
  right:119px;
}

.social-buttons a#buzz-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -68px;
}

.social-buttons a#twitter-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -24px;
}

.social-buttons a#facebook-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -46px;
}

.social-buttons a#rss-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -89px;
}

a.login-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px 0;
}

@keyframes static-bar{0%{right:-25px}100%{right:0}}
@-moz-keyframes static-bar{0%{right:-25px}100%{right:0}}
@-webkit-keyframes static-bar{0%{right:-25px}100%{right:0}}

<div class="floating-bar">
 <div class="login">
  <div id="itp-login-button">
   <a class="login-buttons buttontext" href="#" rel="nofollow" target="_blank"><span class="desc">Menu</span></a>
  </div>
  <div class="social-buttons">
   <a class="lightbox" data-options="{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: true}" href="#" id="twitter-buttons" rel="nofollow"><span>Menu</span></a>
   <a class="lightbox" data-options="{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: true}" href="#" id="facebook-buttons" rel="nofollow"><span>Menu</span></a>
   <a href="#" id="buzz-buttons" rel="nofollow" target="_blank"><span>Menu</span></a>
   <a href="#" id="rss-buttons" rel="nofollow" target="_blank"><span>Menu</span></a>
  </div>
 </div>
</div>

Lihat Demonya

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini