Responsive Share Button Dengan Efek Flip 3D

by kompiajaib

HTML

<script src="http://platform.twitter.com/widgets.js"></script>
<script src="https://apis.google.com/js/plusone.js"></script>
<script src="http://platform.linkedin.com/in.js"></script>
<script src="http://assets.pinterest.com/js/pinit.js"></script>
<div class="flipShare">
    <div class="front">Do You Like This?</div>
    <div class="back-title">Share This Article</div>
    </div>
<div class="flipShare">
    <div class="front">Share on FB</div>
  <div class="back-fb">
      <span style='position:absolute;top:-7px;left:10px'>
      <span class='fb-like' data-href='http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90'></span></span>
  </div>
</div>
<div class="flipShare">
    <div class="front">Share on Twitter</div>
  <div class="back-tw">
      <span style='position:absolute;top:5px;left:10px'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-text='Membuat Menu Vertical Dengan Details And Summary Tag' data-url='http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' data-via='' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">Share on G+</div>
  <div class="back-g">
<span style='position:absolute;top:5px;left:10px'>
<span class='g-plusone' data-count='true' data-href='http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' data-size='medium'>
</span>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">Share on Likedin</div>
  <div class="back-in">
      <span style='position:absolute;top:5px;left:10px'>
<script type='IN/Share'></script>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">Share on Pinterest</div>
  <div class="back-pin">
      <span style='position:absolute;top:5px;left:7px;border:none;'>
<a data-pin-config='beside' data-pin-do='buttonPin'...

CSS

.flipShare{ width:90px; height:35px; margin:5px 60px 5px 0;text-align:center;line-height:35px;float:left }
.flipShare > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );
	background:#333;color:#fff; width:140px; height:35px;
    border-radius: 3px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flipShare > .back-fb,.flipShare > .back-tw,.flipShare > .back-g,.flipShare > .back-in,.flipShare > .back-pin,.flipShare > .back-print,.flipShare > .back-title{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	width:140px; height:35px; border-radius: 3px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flipShare:hover > .front{
	transform: perspective( 600px ) rotateY( -180deg );
}
.flipShare:hover > .back-fb,.flipShare:hover > .back-tw,.flipShare:hover > .back-g,.flipShare:hover > .back-in,.flipShare:hover > .back-pin,.flipShare:hover > .back-print,.flipShare:hover > .back-title{
	transform: perspective( 600px ) rotateY( 0deg );
}
.flipShare > .back-fb{
    background-color: #324b81;
}
.flipShare > .back-tw{
    background-color: #01A7dE;
}
.flipShare > .back-g{
    background-color: #BA3227;
}
.flipShare > .back-in{
    background-color: #136F9B;
}
.flipShare > .back-pin{
    background-color: #B01C23;
}
.flipShare > .back-title,.flipShare > .back-print{
    background-color: #333;vertical-align:middle;color: #fff;
}
.flipShare > .back-print a{
    color: #fff;
    text-decoration:none;
}

JavaScript

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));