Membuat Tombol Donasi Seperti Igniel

Tombol donasi ini sangat diperlukan apalagi kalian ingin mendapatkan suatu donasi dari pengunjung atau viewer tentu dari segi tampilan juga harus disesuaikan pada kali ini saya hanya meniru tampilan situs igniel untuk tombol donasinya menggunakan Fontawesome dan animated css.

Membuat Tombol Donasi

Copy kode css di bawah dan paste tepat di dalam <style&gt; atau <b:skin>

    #donasi{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;flex-wrap:nowrap;justify-content:center;margin-top:20px;background:lightblue;color:#666666;padding:15px;overflow:hidden;transition:all .3s ease;border-radius:10px;}
.logo{margin-right:15px;}
.logo i{font-size:50px;color: lightblue}
.bounce{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:500;font-size:16px;margin:0;padding:5px;text-align:center;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.bounce{-webkit-animation:bounce 1s linear 1s infinite normal;animation:bounce 1s linear 1s infinite normal;}
.kata{line-height:24px;}
.kata span{font-size:18px;font-weight:500;display:block;}
@keyframes bounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1);}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1);}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}}
@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1);}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1);}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}}

Copy kode html di bawah dan taruh seterah kalian

        <div id="donasi">
            <div class="logo">
                <a class='bounce' href="http://">
                <i class="fa fa-heart"></i><br>
                <span>Klik</span>
                </a>
            </div>
            <div class="kata">
                <span class="judul">Donasi Via Paypal</span>
                Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain
                <b>Pintarsaurus</b>. Terimakasih.

            </div>
        </div>

Tombol donasi diatas merupakan hasil redesain saja dari tombol Igniel.com jadi bila ingin yang sama kalian bisa cek artikel dari blog igniel.

Sumber : https://www.igniel.com/2019/06/kotak-donasi-paypal.html