Cara buat tombol share bouncing fixed shadow

Cara buat tombol share bouncing fixed shadow - Bagaimana cara yang paling instan kaya mie aja hehehe dan 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.

Widget tombol share di blog seperti ini:

Cara buat tombol shre bouncing fixed shadow

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

DEMO

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,disini kita ambil hanya efek pantulnya (bouncing) saja, sedangkan untuk gerakan kita gunakan perintah keyframes-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>

Salinan dari blog senior,Semoga bermanfaat

Sumber sahabatblogger77

Cara buat tombol share bouncing fixed shadow

adingba muhammad BLOGGER, INFO 01:00

Related Posts: