Change The Background Color of a Button with JavaScript.

In this example, we will discuss that how we change the Background Color of a Button with JavaScript. Here we will call the function on the onmouseover event of the Button Like this:

  <input type="button" onmouseover="ChangeColor()" value="Button" id="btn1" />

Now we write the javascript code:

 <script language="javascript">
function ChangeColor()
{
document.getElementById('btn1').style.backgroundColor='Red';
setTimeout("ChangeColor2()",2000);
}
  function ChangeColor2()
{
document.getElementById('btn1').style.backgroundColor='Pink';
setTimeout("ChangeColor3()",2000);
}
function ChangeColor3()
{
document.getElementById('btn1').style.backgroundColor='Green';
setTimeout("ChangeColor4()",2000);
}
function ChangeColor4()
{
document.getElementById('btn1').style.backgroundColor='Red';

}
  </script>


Complete Program:

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script language="javascript">
function ChangeColor()
{
document.getElementById('btn1').style.backgroundColor='Red';
setTimeout("ChangeColor2()",2000);
}
  function ChangeColor2()
{
document.getElementById('btn1').style.backgroundColor='Pink';
setTimeout("ChangeColor3()",2000);
}
function ChangeColor3()
{
document.getElementById('btn1').style.backgroundColor='Green';
setTimeout("ChangeColor4()",2000);
}
function ChangeColor4()
{
document.getElementById('btn1').style.backgroundColor='Red';

}
  </script>
 </head>

 <body>
  <input type="button" onmouseover="ChangeColor()" value="Button" id="btn1" />
 </body>
</html>


Ebook Download
View all
Learn
View all