Membuat Responsive Share Button Dengan Efek Flip 3D

Membuat Responsive Share Button Dengan Efek Flip 3D - Postingan kali ini masih berhubungan dengan beberapa postingan yang lalu tentang responsive share button. Dengan merubah beberapa kode CSS, maka share button social media ini memiliki animasi lain yang menarik untuk dicoba untuk menarik perhatian pengunjung blog.

Baca juga:

Dengan memberikan efek animasi flip 3D ketika di-hover ini maka share button ini menjadi lebih menarik. Animasi flip 3D ini memainkan dua sisi (depan dan belakang) dengan posisi awal menampilkan sisi depan dan ketika di-hover akan memutar dan membalikan sisi belakang menjadi di depan. Untuk lebih jelasnya silahkan lihat pada gambar animasi gif di bawah ini atau silahkan coba langsung pada demonya dengan klik link demo di bawah ini.

Responsive Share Button Dengan Efek Flip 3D

Best view with Chrome

Kode 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;
}

Kode HTML


<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' href='http://pinterest.com/pin/create/button/?url=http://www.kompiajaib.com/2014/09/membuat-menu-vertical-dengan-details.html' title='Pin It'><img alt='pinit' height='20' src='//assets.pinterest.com/images/pidgets/pin_it_button.png' title='Pin It' width='40'/></a>
</span>
  </div>
</div>
<div class="flipShare">
    <div class="front">Print This Page</div>
  <div class="back-print">
<a href='javascript:print(document)' title='Print This Page'><img alt='print' height='16' style='margin-right:5px' src='http://1.bp.blogspot.com/-10ufvnCtIJM/UPo6JsA2VOI/AAAAAAAAVUY/MV8Pa2Kr7yI/s1600/iconprinter.png' title='Print This Page' width='16'/>Print This Page</a>
  </div>
</div>
<div style='clear:both'></div>

Kemudian silahkan simpan kode-kode js dari social media-nya di bawah ini, jika sidah ada di template Anda silahkan lewati langkah ini.

Simpan kode js FB di bawah ini tepat di bawah kode <body>


<div id='fb-root'/>
<script>(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'));</script>

Kemudian simpan kode-kode di bawah ini di atas kode </body>


<script async='async' src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<script async='async' src='//platform.linkedin.com/in.js' type='text/javascript'></script>
<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Dan untuk membuat print area untuk tombol Print This Page silahkan simak lagi postingannya di bawah ini.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments