Why Do Mouse Clicks Not Always Work For Styled Input Buttons?

Throughout our application, we use styled input buttons for submitting forms. For some reason you have to precisely click them in order for the click to be registered. Over half

Solution 1:

I believe it's the relative positioning on :active. I guess the moving of the button gets the mouse events confused. I'd suggest to changing the margins instead.

EDIT: Margins don't work either, neither a CSS 2 translation.

You need to somehow move the "image" of the button without moving the button (thus the area that is clicked on) itself, but I can't think of anything right now.

Solution 2:

Went to the JSFiddle site and played around with the styling there.

I noticed the hover was successful on the edge of the button, but the click was not.

So, I changed the left:2px; top:2px; to left:0px; top:0px; and the hover, of course, still worked, but the click was successful on the edge of the button.