Change the color of buttons in different states with events and CSS

Target effect:

Mass button on the form, dark blue when hovering, and light blue when the mouse is left.

HTML code:

<button id= "submitbtn" class= "btn" onmouseover= "this. classname= ' Input_move '" onmouseout= "this.classname= ' input_out '" type= "Submit" tabindex= "6" > Mass </button>
<button id= "previewbtn" class= "btn" onmouseover= "this.classname= ' input_move '" onmouseout = "this.classname= ' input_out '" type= "Submit" tabindex= "6" > Preview </button>

CSS code:

. btn{
color: #ffffff;
background: #44b549;
padding-top:3px;
border-top:1px solid #44b549;
border-right:1px solid #44b549;
border-bottom:1px solid #44b549;
border-left:1px solid #44b549;
width:100px;
height:30pt;
font-size:15pt;
Border-radius:3em;
background-image:linear-gradient (to bottom, #44b549 0px, #44b549 100%);
-moz-border-radius:5px;
Note that there must be no less of this paragraph, which defines the initial style of the button when the page is opened. Without this, the button does not display a style when the page is open until the mouse hovers.

. input_move{
color: #ffffff;
background: #006600;
padding-top:3px;
border-top:1px solid #006600;
border-right:1px solid #006600;
border-bottom:1px solid #006600;
border-left:1px solid #006600;
width:100px;
height:30pt;
font-size:15pt;
Border-radius:3em;
background-image:linear-gradient (to bottom, #006600 0px, #006600 100%);
-moz-border-radius:5px;
}
. input_out{
color: #ffffff;
background: #44b549;
padding-top:3px;
border-top:1px solid #44b549;
border-right:1px solid #44b549;
border-bottom:1px solid #44b549;
border-left:1px solid #44b549;
width:100px;
height:30pt;
font-size:15pt;
Border-radius:3em;
background-image:linear-gradient (to bottom, #44b549 0px, #44b549 100%);
-moz-border-radius:5px;
}

　　　　

Change the color of buttons in different states with events and CSS