Tombol Download dan Demo berubah-ubah warna diblog - MANTANKODE

Tombol Download dan Demo berubah-ubah warna diblog

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.

Daftar isi
Tahap Pertama
Tahap Kedua

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

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

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

Share with your friends

Add your opinion
Disqus comments
Notification

Donasi yang anda berikan akan saya gunakan untuk mengembangkan blog ini.

BANK BNI: 0431705794 a/n Muhammad Rahmadi

Pulsa/DANA/OVO: +6285822266832

Done