ARTICLE

Simple Button Animation in JavaScript

Posted by Mahak Gupta Articles | JavaScript June 23, 2011
In this example, we learn how to change the color( background or fore color) on the mouse over event with the help of JavaScript.
Reader Level:

In this example, we learn how to change the color( background or fore color) on the mouse over 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

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

<script language="JavaScript" type="text/javascript" >

function ChangeColor() {
document.getElementById('btnchangecolor').style.backgroundColor = "Pink";
document.getElementById('btnchangecolor').style.color = "White";
setTimeout("Change2()", 1000);
            }

</script>

Here we set the Background and Fore Color 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()

function Change2() {
document.getElementById('btnchangecolor').style.backgroundColor = "Purple";
document.getElementById('btnchangecolor').style.color = "White";
setTimeout("Change3()", 1000);
            }


Here it sets the color again, now again we call another function Change3() which sets the new color after 1 milliseconds

JScriButt4.gif

Now we write the function Change3()

function Change3() {
document.getElementById('btnchangecolor').style.backgroundColor = "Red";
document.getElementById('btnchangecolor').style.color = "Black";
}


Step 3: Now we call the HideColor() function on the onmouseout event. It sets the default color of the button.

function HideColor() {
document.getElementById('btnchangecolor').style.backgroundColor = "White";
document.getElementById('btnchangecolor').style.color = "Black";
}


Complete Program:

<head runat="server">
    <title></title>
        <script language="JavaScript" type="text/javascript" >
            function ChangeColor() {
                document.getElementById('btnchangecolor').style.backgroundColor = "Pink";
                document.getElementById('btnchangecolor').style.color = "White";
                setTimeout("Change2()", 1000);
            }
            function Change2() {
                document.getElementById('btnchangecolor').style.backgroundColor = "Purple";
                document.getElementById('btnchangecolor').style.color = "White";
                setTimeout("Change3()", 1000);
            }
            function Change3() {
                document.getElementById('btnchangecolor').style.backgroundColor = "Red";
                document.getElementById('btnchangecolor').style.color = "Black";

            }
            function HideColor() {
                document.getElementById('btnchangecolor').style.backgroundColor = "White";
                document.getElementById('btnchangecolor').style.color = "Black";
            }

        </script>
</head>
<
body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="btnchangecolor" value="Button" onmouseover="ChangeColor()"  onmouseout="HideColor()"
            style="background-color: #FFFFFF"  />
    </div>
    </form
>
</body>

COMMENT USING