Tombol Download dan Demo berubah-ubah warna diblog

Cara mudah membuat tombol demo dan download berubah-ubah warnanya

Daftar Isi [Tampil]
Tombol Download dan Demo berubah-ubah warna diblog

Tombol download diblog juga mendukung dalam suatu blog khususnya untuk tombol download dan demo, setiap blog memiliki berbagai macam jenis fungsinya. dan juga memiliki berbagai macam-macam jenisnya.

tetapi baru-baru ini ternyata tampilan tombol seperti download dan demo yang berubah-ubah warnanya sedang buming atau keren lah kata mudahnya. saya sendiri juga sangat suka melihat tampilan tersebut. apalagi kalau pepaduan warnanya cocok dan tepat.
Tolong doa nya yah teman-teman, agar banjir didaerah admin surut.
oke selanjut silahkan ikuti tahap tahap berikut ini.

Tahap Pertama - Tambahkan CSS

salin kode css dibawah ini diatas kode </b:skin> ,dan simpan
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.button{list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}.button ul{margin:0;padding:0}.button li{display:inline;margin:0 3px;padding:0;list-style:none}.button li a.demo,.button li a.download,.btn,#wrap .manta-btn{display:block;position:relative;vertical-align:top;height:52px;line-height:52px;padding:0 30px;font-size:16px;color:#fff;text-align:center;text-decoration:none;border-radius:3px;cursor:pointer;margin:auto;box-shadow:0 2px 8px rgba(0,0,0,0.05)}.button li a.demo{background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47);background-size:400% 400%;animation:Gradient 15s ease infinite}.button li a.download{background:linear-gradient(-45deg,#2680bd,#6cbbf1,#acff6e,#909090);margin:20px auto 0 auto;background-size:400% 400%;animation:Gradient 15s ease infinite;}.button li a.demo:hover,.button li a.download:hover,.btn:hover,.btn:active,.btn.down:hover,.btn.down:active,#wrap .manta-btn:hover,#wrap .manta-btn:active{box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09)}
{background:linear-gradient(-45deg,#2680bd,#6cbbf1,#acff6e,#909090);margin:20px auto 0 auto;background-size:400% 400%;animation:Gradient 15s ease infinite;}
.author-profile{background:#f5f5f5;position:relative;padding:20px;margin:0;overflow:hidden}.author-profile img{border:0;float:left;margin-right:20px;border-radius:20px}.author-profile a.g-profile{color:#000;font-weight:700}.author-profile span{font-size:14px}.author-profile a.g-profile span{font-size:1.2rem}


Untuk Warna:
#2680bd
#6cbbf1
#acff6e
#909090

Tahap Kedua - Kode HTML Download & Demo

silahkan gunakan kode html dibawah ini pada artikel anda yang akan digunakan untuk demo atau tombol download
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#" rel="nofollow" target="_blank">DEMO</a></li>
</ul>
</div>

Keterangan:
# ganti dengan link/url tujuan
demo untuk jenis tombolnya
DEMO untuk jenis tampilan teks pada button

semoga bermanfaat dan berguna, jangan lupa like dan sharenya. terima kasih
Show comments
Notification

Donasi yang anda berikan akan digunakan untuk pengembangan blog ini.

DANA/OVO: +6285822266832

Done
Night Mode