Mouse over effects on buttons using JavaScript and CSS

This tip will allow your buttons to have a life by simply changing its colors whenever the user points the mouse on it, and changing back when moving it out.

The trick is using a combination of JavaScript and CSS

Put this code in your HTML Head Content:

"<Style>
.button  
{ width:98%; 
  text-align:center;  
  cursor:hand;
  font:bold 8pt verdana;  
  border:1pt solid #000000;  
  background:FFCC99;
}
.out
{ width:98%; 
  text-align:center;  
  cursor:hand;  
  font:bold 8pt verdana;  
  border:1pt solid #000000;  
  background:99CC99;
}  
</Style>"

And put this code into your buttons HTML Property:

Class: button
Other: onMouseOut="this.className='button'" onMouseOver="this.className='out'"

Enjoy!