Question

I was wondering how I could add 3-States to a Submit Button. By states I mean so that the button changes image when hovered over, clicked and just static/untouched. I’d prefer if the solution used purely HTML & CSS but Javascript is fine too. Thank-You!

Answer 1

I find it easier to give id’s or classes to such things to make it easier. You can do something like this in jquery:

Let’s say that the button has a #derp id.

$("#derp").click(function(){
   $(this).toggleClass("pressed");
});

Basically this will add or remove the “pressed” class from the item based on its state. Just add the CSS for .pressed and you’re ready to go.

#derp {...}
#derp:hover {...}
#derp:active {...}
#derp.pressed {...}