How to style "submit" inputs on mouseover, click?

Question

I need to style two different inputs to appear differently on mouseover and on click, much like buttons. Ordinarily I would use buttons; however, one of these is an input type="reset" and I assume it is simpler to use an input for this than write a form reset script. How does one style inputs with the types "submit" and "reset" with CSS for mouseover and click?

Answer 1

Assuming that you mean in CSS, rather than a JavaScript approach, you can use pseudo-classes:

input[type=reset], /* CSS2.1 attribute-equals selector */
#resetButtonID,
.resetButtonClass-Name {
    /* the reset button */
}

input[type=reset]:hover,
#resetButtonID:hover,
.resetButtonClass-Name:hover {
    /* the reset button when hovered over */
}

input[type=reset]:active,
#resetButtonID:active,
.resetButtonClass-Name:active {
    /* the reset button when mouse-down */
}

input[type=reset]:focus,
#resetButtonID:focus,
.resetButtonClass-Name:focus {
    /* the reset button when focussed by keyboard-navigation */
}

JS Fiddle demo.