Create a Unique Button that Changes Color

Creating Colorful Buttons on the blog  - In this tutorial I can only provide a  simple button  that can change color by itself, this Button is unique because it is not in general, buttons usually do not use  scripts , but this time the button uses a script so that the color can be displayed. change by itself.

So that you are not confused about what the button looks like, you can see the button below.

Demo Button Style

Now for the installation is quite easy you just have to add a little CSS , a little HTML , and a little Javascript .

HTML , please put it where you want.

 <a class='buttonz' href='https://www.miusm-tech.com/p/html-tag.html' target='_blank'>Nama Button</a> 

HTML wouldn't be perfect without CSS. To add CSS, please put the CSS below right above ]]></b:skin>or</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(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);
} 

And the last one is Javascript , this javascript function so that the background that has been set in CSS can work and make the color of the button change. Please put it above </head>or</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> 

And if you want to ReDesign the template but can't or don't have time, you can use the services of this blog admin,  " Creating an Accordion Widget For Pages and Posts with jQuery ".
Cheap prices.

And if you want products or read articles about miusm-tech then dont forget to bookmark our site and visit time by time cause we update it for you time by time.

Hopefully this tutorial is useful...