Styling button interfere with click event - html

Question

First of all: sorry for my bad english.
I've seen the problem only with Chrome, Opera and Safari, so I suppose it's a webkit problem.
I'm styling the buttons to give them a 'push' effect.
The problem is that if I click the button in certain points, at certains heights, it doesn't trigger the 'click' event.
I created a fiddle to better understand my problem; basically this is the css I'm using:
input[type="submit"], input[type="button"], button, .btn{
position: relative;
display: inline-block;
border: none;
padding: 4px 10px;
text-align: left;
color: #222222;
font-weight: bold;
background-color: transparent;
top: 1px;
bottom: 0;
vertical-align: baseline;
transition: none!important;
-webkit-transition: none!important;
}
input[type="submit"], input[type="button"], button, .btn{
background-color: #444444;
color: #FFF!important;
text-decoration: none;
text-align: center;
border-bottom: 3px solid rgba(0,0,0,0.75);
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .btn:hover{
top: 0;
border-bottom-width: 4px;
cursor: pointer;
}
input[type="submit"]:active, input[type="button"]:active, button:active, .btn:active, .btn.selected{
top: 4px;
border-bottom-width: 0;
bottom: 0;
}
.btn:hover, .btn:active{
color: #FFF;
}
I was expecting it near the top of the button (I increment 'top', so it's normal behaviour that if I move the button too much down the cursor is not anymore upon the button), but it also doesn't work under the text.
That, I hadn't expected.
At the beginning I thought that it was working only when the cursor was exactly on the button text, but if I click on the bottom border it works.
My best guess so far is that the 'moving' of the element interfere with the click event (in the same way as if I pressed the mouse button and moved the cursor before releasing it).
Just wanted to know if somebody had this problem and solved it.
On Firefox and IE10 I had no problem (only near the top, but that's expected behaviour).
Thank you.

Answer 1

Try this: http://jsfiddle.net/Lc9EW/
It uses a transparent border over the top area when in the active state:
margin-top: -5px;
border-top: 15px solid transparent;
border-bottom-width: 0px;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding;