HTML buttons animation on mouse hover and on mouse out

 <style>
       .btn1
         {
             color: #b85c5c;  //this sets the font color of the text in the buttons
            
         }
       .btn1hov
       {
           color:#2d579a;      //this sets the font color of the text in the buttons
           border: 1px solid navy;   //this sets the border color of the  buttons
       }
         input[type=button].btn2
         {
            
             color: #b85c5c;
            
         }
         .btn2hov
         {
              color:#2d579a;
              border: 1px solid navy;
         }
</style>


Place the above code in header section of a html webpage

        <input type="button" value="User Login" title="Click for Normal User Login Page"  class="btn1" onmouseover="this.className='btn1hov'" onmouseout="this.className='btn1'" onclick="location.href='login.jsp'" >
        <input type="button" value="Admin Login" title="Click for Admin Login Page" class="btn2" onmouseover="this.className='btn2hov'" onmouseout="this.className='btn2'" onclick="location.href='adminlogin.jsp'">


Place the above code in body section of same html page.
The buttons take the class btn1,btn2 initially, i.e the font on the buttons will be in color  #b85c5c.

When the mouse is hovered on the buttons,the buttons takes the classes btn1hov,btn2hov.This is possible by using event onmouseover.

After the mouse hover is out from the buttons,they again takes the classes btn1,btn2.This is possible by using event onmouseout


We can watch the live demo ,by visitng the link http://jsfiddle.net/tq7vm/