Membuat Tombol Share Bouncing Fixed Shadow

Berikut ini akan diuraikan langkah-langkah cara membuat ( Tombol Share Bouncing Fixed Shadow ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Tombol Share Bouncing Fixed Shadow ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

.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}

HTML Kode

<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>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Tombol Share Bouncing Fixed Shadow ) semoga bermanfaat terima kasih.

CONTOHNYA