Cara membuat Tombol Share Bouncing Fixed Shadow

Tombol Share Bouncing Fixed Shadow - Cara mudah untuk mempromosikan blog agar banyak yang mengenal adalah dengan membagikan ulang artikel kebeberapa sosial media seperti Facebook, Twitter dan Google Plus. Sehingga traffik yang kita dapatkan bersumber dari berbagai ragam lalu lintas, karena tidak menutup kemungkinan mereka yang sedang online di facebook dan twitter akan membuka blog Anda jika posting di share ulang ke media tersebut.

Dengan perhitungan minimal, jika 20 orang yang berkunjung ke blog Anda melalu media Facebook, 20 orang dari Twitter dan 20 orang dari Google Plus, maka blog Anda sudah mendapat kunjungan 60 visitor dalam sehari untuk 1 posting atikel, belum lagi mereka yang rutin melakukan blogwalking ke blog Anda. Hmm...sudah pasti mereka yang belum mengenal blog Anda saat ini akan segera tahu semua informasi yang Anda tuliskan, dan itu hanya karena membuat widget tombol share di blog seperti ini:

Apa bedanya dengan Widget tombol Share yang digunakan pada beberapa blog yang lain..?, fungsi widget ini sama seperti Membuat Tombol Share Terbaru Efek Transisi pada artikel terdahulu, namun karena kegunaan widget ini dapat membantu menaikkan reputasi blog, efek tampil tombol saya modifikasi lagi dengan style Bouncing Fixed Shadow untuk membuat pengunjung tertarik membagikan ulang artikel Anda dengan meng-KLIK tombol share yang Anda buat seperti ini:




DEMO SHOW



Karena ini berupa tampilan widget, untuk desain tampilan saya tidak menggunakan link background gambar (Url-gambar-icon) pada masing-masing tombol agar loading blog tidak berat, cukup kita bentuk dengan Penggunaan Background Radial Gradient, selanjutnya kita gabungkan dengan font-format ('svg') untuk menampilkan icon gambar pada masing-masing tombol.

@font-face {
src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
 font-family: 'icomoon';
 format('embedded-opentype'),
 format('woff'),
 format('truetype'),
 format('svg');font-weight: normal;font-style: normal
}

Untuk Efek bouncing fixed shadow kita gunakan CSS animation: shadow 2s infinite, sama seperti cara ➞ Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi, namun disini kita ambil hanya efek pantulnya (bouncing) saja, sedangkan untuk gerakan kita gunakan perintahkeyframes-jumping dan keyframes-shadow seperti ini:

@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}

Susunan efek untuk gerakan tombol sudah selesai kita buat, selanjutnya tinggal mengatur bentuk tampilan saat tombol di HOVER. Kode lengkapnya seperti ini:

.tombol-share {
  background:radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);
  width:100px;height:100px;border-radius:50%;display:inline-block;
  font-size:75px;line-height:100px;margin:25px;position:relative;text-align:center;
  -webkit-animation:jump 2s infinite;
  -moz-animation:jump 2s infinite;
  animation:jump 2s infinite}

.wrapper {width:100px;height:100px;display:inline-block;position:relative;margin:20px}
.tombol-share span {
  display: block;width: 0;height: 0;border-radius: 0;position: absolute;
  left: 50%;top: 50%;margin: 0;-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;transition: all 0.3s}

.tombol-share:hover span {width:100px;height:100px;border-radius:100%;margin:-50px}
.facebook span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%,  #3B5998 80%);}
.twitter span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);}
.googlePlus span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);}

.tombol-share i {
  background: none;width: 100px;height: 100px;position: absolute;
  left: 0;top: 0;line-height: 90px;font-size: 50px;z-index: 10}

.tombol-googlePlus:before {content: "\e600"}
.tombol-facebook:before {content: "\e601"}
.tombol-twitter:before {content: "\e602"}
.tombol-share .tombol-facebook {color: #3B5998;}
.tombol-share .tombol-twitter {color: #4099FF;}
.tombol-share .tombol-googlePlus {color: #DB5A3C;}
.tombol-share:hover i{color: white;}
.shadow {
  width: 46px;height: 10px;background: rgba(0,0,0,0.2);position: absolute;
  left: 50%;margin-top: -10px;border-radius: 50%;
  -webkit-animation: shadow 2s infinite;
  -moz-animation: shadow 2s infinite;
  animation: shadow 2s infinite}

@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@font-face {
 font-family: 'icomoon';
 src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
 src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?#iefixblijkv') format('embedded-opentype'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.woff?blijkv') format('woff'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.ttf?blijkv') format('truetype'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.svg?blijkv#icomoon') format('svg');font-weight: normal;font-style: normal}

[class^="tombol-"], [class*=" tombol-"] {
 font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;
 font-variant: normal;text-transform: none;line-height: 1;
 -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}

Saya hanya menampilkan 3 buah tombol saja pada widget ini, karena seperti facebook, twitter dan Google+ yang secara umum sering digunakan untuk berbagi informasi. HTML pemanggilnya seperti ini:

<div class="wrapper">
  <a class="tombol-share facebook" href="/">
     <i class="tombol-facebook"></i>
        <span></span>
  </a>
        <div class="shadow"></div>
</div>

<div class="wrapper">
   <a class="tombol-share twitter" href="/">
      <i class="tombol-twitter"></i>
         <span></span>
    </a>
         <div class="shadow"></div>
</div>

<div class="wrapper">
   <a class="tombol-share googlePlus" href="/">
      <i class="tombol-googlePlus"></i>
         <span></span>
   </a>
         <div class="shadow"></div>
</div>

Bagaimana pekerjaan yang cukup mudah bukan? hehe..!!! semoga dengan beberapa pilihan tombol share seperti diatas, sahabat semua pecinta admin Oi tok sudi kiranya membagikan ulang posting kali ini dengan ihklas. Terimakasih.