Membuat Icon Button Yang Unyu-unyu Bisa Berubah Warna

Wednesday, July 26, 2017

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 :

Contoh Button

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRSiwhlVBXdFeprRsT7GD0RRTQ3mkhagvE4wb0USSt_BqbWo6B45pp8jnC8LubvhnruyIVbmBH31eSmk9XOqHQ4c86sOlqHlt4XREbEM72zKhctHS7OFD9jfxig30A_YP7sr5lKUt5IXS7/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