CSS - buttons are unclickable from time to time?

Question

I have multiple anchor elements. Once in a while clicking on them does nothing, all the CSS animations work but the links are not opening any pages / triggering any actions. I have to move cursor a little and then click again.

I'm sure it's a CSS issue, but I can't find anything wrong in my CSS. I think the problem may lie in margins (4px bottom margin BUT 4px top margin on :active) but I've seen this on many websites and the buttons were working just fine...

Here are the buttons. Click on them, around one of 20 clicks doesn't work (sometimes it happens with the very first click though):

http://jsfiddle.net/4nz4v/ (notice how buttons are not getting .active class after clicks, tested it in both latest Opera and Chrome)

Here's the CSS:

.button {
    display: inline-block;
    vertical-align: top;
    color: #000;
    background: #aaa;
    text-shadow: 1px 1px 1px #fff;
    border: 0;
    padding: 0.6em 1.2em;
    margin: 0 0 4px 0;
    text-decoration: none;  
    border-radius: 6px;
}

.button:hover {
    color: #fff;
    text-shadow: none;
}

.button:active {
    margin: 4px 0 0 0;
}

.active {
    background: #fff;
    text-shadow: none;
    color: #000;
}

Thank you.

Answer 1

As you suspected it does seem to be a margin problem.

.button:active {
    margin: 4px 0 0 0;
}

Removing the above code resolves the issue. I would remove this code and add padding to it's parent for more consistant results.