Membuat Tombol Donasi Seperti Igniel

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

See the Pen
Donation Me
by Rian_kuno (@rian_kuno)
on CodePen.


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

1 comment : Membuat Tombol Donasi Seperti Igniel

  1. alchosilber
    Artikelnya bisa dipahami dengan baik, kreatif dan sangat membantu, mari berkunjung ke blog saya, silahkan klik tulisan ini yaa