Membuat Tombol Animasi MinanDzgn

Membuat Tombol Animasi MinanDzgn - Selamat sore sobat MinanDzgn kali ini akan saya share bagaimana cara membuat tombol yang bisa bergerak seperti jelli,,,hehehe

Mudah membuat tombol ini kok hanya membutuhkan CSS dari CSS nya kita panggil dengan id nya, maka tombolnya akan beranimasi seperti jelli.

Bagi yang ingin membuat dan menerapkan didalam blog sobat, silahkan ikuti cara dibawah ini:

Membuat Tombol Animasi MinanDzgn

1. Buka dan masuk www.blogger.com

2. Pilih Tema, klik Edit HTML

3. Masukkan CSS dibawah ini sesudah ]]></b:skin> atau <style type='text/css'>

/* CSS Shortcodes MinanDzgn*/
#wrap {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-weight:700;background:#ff675c;padding:9px 18px;margin:0 3px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
.btn.down {background:#4f5a60;}
.btn:hover,.btn:active {background:#ff857c;}
.btn.down:hover,.btn.down:active {background:#5c686f;}
a.btn {color:rgba(255,255,255,1);}
a.btn:hover,a.btn:active,a.btn.down:hover,a.btn.down:active{color:#fff;}
.btn i {margin-left:10px;font-weight:normal;font-family:FontAwesome;}
.btn.down.anima {-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;}

/* Custom Button MinanDzgn*/
a.minan-btn{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;transition:all .3s}
a.minan-btn:hover {-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;}
a.minan-btn:after {content: '';position:absolute;z-index:-1;transition:all .3s;}
a.minan-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.minan-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.minan-button:active {background:#4786b5;top:2px;}
a.minan-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.minan-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.minan-button:active:before {color:#fff;}
a.minan-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.minan-buttona:before {left:0;top:-110%;}
a.minan-buttona:hover:before {top:0;}
a.icon-result:before {content: "\f061";}
@-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}

4. Simpan

5. Terakhir masukkan kode HTML dibawah ini didalam postingan, Ingat: diHTML jangan di Compose.

<div id="wrap">
<a class="btn down anima" href="http://minandzgn.blogspot.com" target="_blank">RESULT <i class="fa fa-paper-plane"></i></a></div>

href="ISI URL YANG MAU DIPASANG"

6. Tinggal di Publikasikan dan selesai.


Contohnya:

RESULT

Sekian dari Cara Membuat Tombol Animasi MinanDzgn, semoga bermanfaat.
Jika masih belum paham silahkan komentar dibawah. Terimakasih