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.

After the call of JavaScript function

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.

ChangeColor(): For Change the Color on the onmouseover event
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 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).

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 millisecond

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