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

Question

I need to create two different inputs in order to display differently on mouseover and in click, like buttons. Normally I would use buttons; however, one of them is input type = "reset", and I assume that it is easier to use input for this than to write a reset script form. How does one style introduce the "submit" and "reset" types with CSS for the mouse and click?

Answer 1

Assuming you mean CSS, not 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 .

Answer 2

This is the same as any other element in CSS, there is a psuedo selector for hovering and focusing, but not specifically for clicks. You can also use the attribute selector:

 input[type="reset"]{/* attribute selector*/} input[type="reset"]:hover{/* :hover psuedo selector*/} input[type="reset"]:focus{/* :focus psuedo selector*/} input[type="reset"]:active{/* :active psuedo selector (for click)*/} 

The focus style will be applied when the user first presses (or focuses, of course), but loses the style as soon as the user moves the focus to another element. To customize the click style for this small moment when the mouse button is unavailable, use javascript or try the :active selector, which (I just realized now) can be applied to unattached elements.