Button Events and Depth

Question

I have buttons that have been set to the depth of pressing (i.e. they move a few pixels in the: active state), but they cause problems in the fact that sometimes the button is pressed and nothing happens.

<button>Button</button> button:active {    margin-top: 5px; } 

I illustrated the problem in jsfiddle:

http://jsfiddle.net/helenst/vUU55/

Chrome has a thin bar above and below the text, the height is equal to the depth of the click, in which click events do not work. (for example, try clicking a pixel or two above "B"). Both mousedown and mouseup are received, but the click does not work.

In Firefox and Opera, there is an area of ​​the same size at the top of the button in which the mouse click does not respond. I find it a little more logical in that the mouse is inside the button, but the mouse is outside. If I click on this area, but drag the mouse back to the button before releasing it, the click is activated.

However, this still makes no sense - if I close the container around the button (so that all the states of the buttons are contained inside it) and detects events in the container, the problem still arises.

If I remove the click depth, everything will be fine.

I suppose I could make it respond to mousedown events, and then detect the mouse in the document, this might get around it, but it breaks the normal behavior of the button, and I would like to have a solution other than javascript. Can anyone help?

Answer 1

If you can do work with an active style using padding-top (or anything inside the border - even setting a border with 5px might work, sorry unchecked). Although, of course, this confuses your style several times; a horizontal striped background image can replace the upper border if you need it, albeit a hacky idea).

Sorry, cannot be tested in new browsers at present. I have seen this type of buttons a few places before, but I can’t recall any of them to check how well they cope with this problem / what code they use.

Almost made it a new answer, but SO loves it less: Another alternative that I have seen, although it’s more difficult to add really great depth (movement), is to use the insert and start in border styles.