Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

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.

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 b{font-size:14px}.author-profile a.g-profile b{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