Change The Background Color of a Button with JavaScript.

By Mahak Gupta Aug 26, 2012
In this example, we will discuss that how we 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>


Mahak Gupta

My name is Mahak Gupta. I am a C# Corner MVP.

COMMENT USING

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs