Cara Membuat Button Berubah Warna Pada Blog

Cara Membuat Button Berubah Warna Pada Blog - Pada artikel kali ini saya akan membagikan cara membuat Tombol atau Button yang dapat berubah warna ketika kursor sobat mendekati atau menyentuhnya. Button ini unik karena tidak pada umumnya, button biasanya tidak memakai script, tapi button kali ini menggunakan script, agar warna bisa berubah dengan sendirinya.

Untuk pemasangannya, sobat hanya perlu menambahkan sedikit CSS, HTML, dan Javascript.

• HTML, silahkan sobat letakkan di tempat yang diinginkan

 <a class='buttonz' href='#link-disini' target='_blank'>Nama Button</a>  

• HTML tidak akan sempurna tanpa CSS, untuk menambahkan CSS silahkan sobat meletakkan CSS di bawah ini tepat berada di atas ]]></b:skin> atau </style>

/* BUTTON PELANGI */
.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/AVvXsEjt-iwpPsxua28lkUqJKR5zmsVZVmGM2V65hbzNPda8PQrfm9HBzlrnWx11WOmxlmNY6_ieuPxulWNZq0SZOWKAM3w-W_8UC-8N2kz4cvBSrWHCJZveUvKRaIs0hAHrRVIl9lNOM9F-LrDg/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);
} 

• Dan yang terakhir yaitu Javascript, fungsi javascript ini agar background yang sudah di set di CSS dapat bekerja dan membuat warna button tersebut berubah - ubah. Silahkan sobat letakkan di atas </head> atau </body>

 <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> 

Sekarang sobat sudah mempunyai button yang dapat berubah warna pada blog sobat. Jika cara di atas tidak berhasil, sobat bisa bertanya pada kolom komentar di bawah.