Use an event to change the color of a button in different States, and use the event CSS to change the button.

Use an event to change the color of a button in different States, and use the event CSS to change the button.

Target results:

The Group button of the Form. When hovering over the mouse, it is dark blue, and when the mouse leaves, it is light blue.

HTML code:

<Button id = "submitBtn" class = "btn"Onmouseover = "this. className = 'input _ move '" onmouseout = "this. className = 'input _ out '"Type = "submit" tabindex = "6"> group sending </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: # 44b.pdf;
Padding-top: 3px;
Border-top: 1px solid #44b549;
Border-right: 1px solid #44b549;
Border-bottom: 1px solid # 44btom;
Border-left: 1px solid #44b549;
Width: 100px;
Height: 30pt;
Font-size: 15pt;
Border-radius: 3em;
Background-image: linear-gradient (to bottom, # 44b00000px, # 44b0000100% );
-Moz-border-radius: 5px;
}Note that this section must not be missing. This section defines the initial style of the button when the page is opened. If this section does not exist, the button does not display the style when the page is opened until the mouse is hovering.

 

. 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: # 44b.pdf;
Padding-top: 3px;
Border-top: 1px solid #44b549;
Border-right: 1px solid #44b549;
Border-bottom: 1px solid # 44btom;
Border-left: 1px solid #44b549;
Width: 100px;
Height: 30pt;
Font-size: 15pt;
Border-radius: 3em;
Background-image: linear-gradient (to bottom, # 44b00000px, # 44b0000100% );
-Moz-border-radius: 5px;
}