CSS button/link not registering on some clicks

Question

I want a button to "depress" when clicked. However, the method I have attempted has an undesirable effect - some clicks in certain locations on the button aren't being registered.

This question is not about JavaScript. I have linked to a JSFiddle below, which uses a JavaScript click event listener, but this is only to describe the problem better. The actual problem I'm facing is nothing todo with event listeners - the hyperlink itself does not work when clicked in various places (the browser doesn't navigate to the linked page, and even though the CSS :active class works fine, the browser behaves as if there wasn't even a click).

The fat, depressable button I'm trying to style.

CSS I'm using:

a.fatButton {
    display: inline-block;
    position: relative;
    margin: 8px;
    padding: 16px;
    background: #faa;
    border-radius: 16px;
    box-shadow: 0 8px 0 0 #f88;
    text-decoration: none;
    color: #000;
}
a.fatButton:active {
    top: 8px;
    box-shadow: none;
}

HTML of button inside container div:

<div id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>

Here is a JSFiddle describing the problem in more depth: http://jsfiddle.net/g105b/d3Y9X/

And here is a recording of the problem: http://youtu.be/N6UfWdbA1Ac

The problem is when there is any movement in the button... this could be a change of the "top" property - as in this example - a margin-top, a negative margin-bottom, a translateY, padding-top ... there must be a way to create this type of button-press effect without having this problem?

I am using Chrome 29, which was used to record the video, but the problem is also apparent in Firefox 23, although the "dud area" is in a different place on the button within Firefox.

Answer 1

It is because you are moving the button with the :active selector. The top of the element changes by 8px and this happens before the click event is registered with Javascript. So when you click within the top 8 pixels the click won't register.

You could achieve the same effect by also changing the padding-top value within :active.

a.fatButton:active {
    top:8px;
    padding-top:16px;
    box-shadow: none;
}

Updated fiddle: http://jsfiddle.net/NT5e2/

Answer 2

i think we can use "mousedown" instead of "click" , can solve this problem

Updated fiddle: http://jsfiddle.net/d3Y9X/8/

document.querySelector("a.fatButton").addEventListener("mousedown", function(e){
    c++;
    csp.textContent = c;
    e.preventDefault();
    return false;
});