Post
Ask Question

Simple Button Animation in JavaScript

Introduction

 
In this example, we learn how to change the color( background or forecolor) on the mouse over the event with the help of JavaScript.
  
JScriButt1.gif
 
After the call of JavaScript function 
 
JScriButt2.gif
 
Step 1: First we take a Button control (btnchangecolor). We set the color (BackGround and ForeColor) as per our requirement
  1. <input type="button" id="btnchangecolor" value="Button" onmouseover="ChangeColor()"  onmouseout="HideColor() style="background-color: #FFFFFF"  /> 
There are two JavaScript Functions in it.
  1. ChangeColor(): For Change the Color on the onmouseover event
  2. HideColor(): Sets the Default Color.
Step 2: Now we write the JavaScript Functions:
  1. <script language="JavaScript" type="text/javascript" >  
  2. function ChangeColor() {  
  3. document.getElementById('btnchangecolor').style.backgroundColor = "Pink";  
  4. document.getElementById('btnchangecolor').style.color = "White";  
  5. setTimeout("Change2()", 1000);  
  6.             }  
  7. </script> 
Here we set the Background and ForeColor of the button. Here we call another function Change2(). This function is used to change the color of the button again.
 
Note: Here we call setTimeout function, it helps us to call the function( Change2() ) after 1 millisecond (1000).
 
JScriButt3.gif
 
Now we write the function Change2()
  1. function Change2() {  
  2. document.getElementById('btnchangecolor').style.backgroundColor = "Purple";  
  3. document.getElementById('btnchangecolor').style.color = "White";  
  4. setTimeout("Change3()", 1000);  
  5.             } 
Here it sets the color again, now again we call another function Change3() which sets the new color after 1 millisecond
 
JScriButt4.gif
 
Now we write the function Change3()
  1. function Change3() {  
  2. document.getElementById('btnchangecolor').style.backgroundColor = "Red";  
  3. document.getElementById('btnchangecolor').style.color = "Black";  
  4. } 
Step 3: Now we call the HideColor() function on the onmouseout event. It sets the default color of the button.
  1. function HideColor() {  
  2. document.getElementById('btnchangecolor').style.backgroundColor = "White";  
  3. document.getElementById('btnchangecolor').style.color = "Black";  
  4. } 
Complete Program
  1. <head runat="server">  
  2.     <title></title>  
  3.         <script language="JavaScript" type="text/javascript" >  
  4.             function ChangeColor() {  
  5.                 document.getElementById('btnchangecolor').style.backgroundColor = "Pink";  
  6.                 document.getElementById('btnchangecolor').style.color = "White";  
  7.                 setTimeout("Change2()", 1000);  
  8.             }  
  9.             function Change2() {  
  10.                 document.getElementById('btnchangecolor').style.backgroundColor = "Purple";  
  11.                 document.getElementById('btnchangecolor').style.color = "White";  
  12.                 setTimeout("Change3()", 1000);  
  13.             }  
  14.             function Change3() {  
  15.                 document.getElementById('btnchangecolor').style.backgroundColor = "Red";  
  16.                 document.getElementById('btnchangecolor').style.color = "Black";  
  17.             }  
  18.             function HideColor() {  
  19.                 document.getElementById('btnchangecolor').style.backgroundColor = "White";  
  20.                 document.getElementById('btnchangecolor').style.color = "Black";  
  21.             }  
  22.         </script>  
  23. </head>  
  24. <body>  
  25.     <form id="form1" runat="server">  
  26.     <div>  
  27.     <input type="button" id="btnchangecolor" value="Button" onmouseover="ChangeColor()"  onmouseout="HideColor()"  
  28.             style="background-color: #FFFFFF"  />  
  29.     </div>  
  30.     </form>  
  31. </body><head runat="server">  
  32.     <title></title>  
  33.         <script language="JavaScript" type="text/javascript" >  
  34.             function ChangeColor() {  
  35.                 document.getElementById('btnchangecolor').style.backgroundColor = "Pink";  
  36.                 document.getElementById('btnchangecolor').style.color = "White";  
  37.                 setTimeout("Change2()", 1000);  
  38.             }  
  39.             function Change2() {  
  40.                 document.getElementById('btnchangecolor').style.backgroundColor = "Purple";  
  41.                 document.getElementById('btnchangecolor').style.color = "White";  
  42.                 setTimeout("Change3()", 1000);  
  43.             }  
  44.             function Change3() {  
  45.                 document.getElementById('btnchangecolor').style.backgroundColor = "Red";  
  46.                 document.getElementById('btnchangecolor').style.color = "Black";  
  47.             }  
  48.             function HideColor() {  
  49.                 document.getElementById('btnchangecolor').style.backgroundColor = "White";  
  50.                 document.getElementById('btnchangecolor').style.color = "Black";  
  51.             }  
  52.         </script>  
  53. </head>  
  54. <body>  
  55.     <form id="form1" runat="server">  
  56.     <div>  
  57.     <input type="button" id="btnchangecolor" value="Button" onmouseover="ChangeColor()"  onmouseout="HideColor()"  
  58.             style="background-color: #FFFFFF"  />  
  59.     </div>  
  60.     </form>  
  61. </body> 


Similar Articles