Social Button Paling Keren Dengan Tampilan Hover

Social Button Paling Keren Dengan Tampilan Hover - Social button sangat berdampak positif bagi rangking SEO sebuah Blog, karena selain berfungsi sebagai mempromosikan blog, social button juga berfungsi untuk memudahkan berbagi kepada calon visitor blog sobat. Jika pada postingan sebelumnya saya membahas tentang Cara Membuat Tombol Twitter, Google +1 dan Facebook Like Valid Html5, kali ini saya akan membahas tentang bagaimana cara membuat social button dengan tampilan hover yang keren.

Kode CSS Social Button

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";html,body{min-height:100%}
body{background-image:linear-gradient(45deg,rgba(194,233,221,0.5) 1%,rgba(104,119,132,0.5) 100%),linear-gradient(-45deg,#494d71 0%,rgba(217,230,185,0.5) 80%);margin:0}
#buttons{border-radius:5px;padding:14px 7px;background:white;width:660px;overflow:hidden;margin:150px auto 0;box-shadow:0 2px 3px rgba(71,71,71,0.31)}
.button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;margin:0 7px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}
.icon i{color:#fff;line-height:42px}
.slide{z-index:2;display:block;margin:0;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}
.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid #fff;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;margin:0;position:absolute;text-align:center;top:10px;width:100%}
.button .slide{-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}
.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}
.twitter iframe{width:90px !important;right:5px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:70px !important;top:10px;right:15px;position:absolute;display:block;z-index:1}
.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}
.facebook:hover .slide{left:150px}
.twitter:hover .slide{top:-40px}
.google:hover .slide{bottom:-40px}
.linkedin:hover .slide{left:-150px}
.facebook .icon,.facebook .slide{background:#305c99}
.twitter .icon,.twitter .slide{background:#00cdff}
.google .icon,.google .slide{background:#d24228}
.linkedin .icon,.linkedin .slide{background:#007bb6;}

Struktur Html

<div id="buttons">
<div class="facebook button">
<i class="icon">
<i class="icon-facebook">
</i>
</i>
<div class="slide">
<p>
facebook
</p>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true">
</iframe>
</div>
<div class="twitter button">
<i class="icon">
<i class="icon-twitter">
</i>
</i>
<div class="slide">
<p>
twitter
</p>
</div>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="google button">
<i class="icon">
<i class="icon-google-plus">
</i>
</i>
<div class="slide">
<p>
google+
</p>
</div>
<div class="g-plusone"></div>
<script type="text/javascript">
window.___gcfg={lang:"id"};(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/platform.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
</script>
</div>
<div class="linkedin button">
<i class="icon">
<i class="icon-linkedin">
</i>
</i>
<div class="slide">
<p>
linkedin
</p>
</div>
<script type="IN/Share" data-counter="right">
  </script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">lang:en_US;</script>
</div>
</div>

Sengaja saya kali ini tidak memberikan tutor lengkapnya agar sobat blogger bisa belajar sendiri sedikit demi sedikit. Semoga Sukses Sob :D