Membuat Responsive Share Button Dengan Efek Flip 3D

Membuat Responsive Share Button Dengan Efek Flip 3D

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×