MASIGNCLEAN101

Membuat Icon Button Yang Unyu-unyu Bisa Berubah Warna

Assalamualaikum wr.wb
Selamat datang kembali sobat di blog saya ini, kali ini saya akan membagikan sebuah tutorial yang tentunya bisa membuat blog sobat sekalian menjadi menarik nih, Ya sebagai uji coba sih di Blog yang bisanya khusus untuk mendownload aplikasi mungkin. ada kalanya jika kalian menggunakan trik ini biar button download kalian menjadi menarik. 

Tapi jika kalian masih penasaran silakan liat link dan bentuk button dibawah ini :


Gimana sobat tertarik tidak jika tertarik tidak? jika tertarik bisa kita lakukan sekarang dan tampa basa-basi langsung saja ini dia langkah-langkahnya :



Membuat Icon Button Yang Bisa Berubah Warna

1. Silakan Sobat Buka Blog sobat, lalu masuk ke "Tema""Edit HTML" dan cari kode ]]></b:skin> 
 
2. Silakan Sobat Copy CSS dibawah ini dan pastekan Kode CSS tersebut diatas kode ]]></b:skin>
/* BUTTON WARNA */
.buttonz{
display:inline-flex;
border-radius:4px;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
color:#FFF!important;
background:url(http://1.bp.blogspot.com/-8ajTcOaRwVU/VJ_Z9jExy2I/AAAAAAAAAwg/b-ae25VRCHM/s1600/rainbow.png);
background-size:cover;
padding:8px 25px;
text-shadow:none;
transition:all 1s;
}
.buttonz:hover, .buttonz:hover, .buttonz.link:hover {
box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);
} 
3. Kemudian Sobat Copy juga Kode Javascript dibawah ini dan Pastekan diatas kode </head>
 <script type='text/javascript'>
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++; 
$('.buttonz').css({backgroundPosition: (pos * 1) + '% 1px'});
}
  </script> 
4. Setelah itu simpan dan masuk ke menu "Pos"  dan buat "entri baru"

5. Kemudian sobat copy kode dibawah ini dan letakkan dimana saja yang sobat inginkan
 <a class='buttonz' href='#link-disini' target='_blank'>Nama Button</a> 
Bagaiman Mudah bukan, Cara ini silakan kalian coba sendiri dirumah, terima kasih telah membaca artikel ini, semoga bermanfaat bagi kita semua, Terima Kasih
Wassalamualaikum wr.wb
Share This :
Zet Tube

Silahkan berkomentar atau berpendapat melalui form dibawah. Berkomentarlah sesuai dengan isi artikel, link tidak akan ditampilkan, dan komentar yang mengandung unsur SARA tidak diperkenankan.
Jadilah orang yang bijak dan bisa menghargai orang lain Oke sobat :)