click() at the top of span button doesn't work

Question

I've been trying to make buttons using the simple structure :

<a href="#/category/portfolio/" class="filter" data-filter="*">
<span class="button">Tout</span>
</a>

It works, except for the very top of the buttons. We can click on it, the CSS activates, but not the jQuery related.

http://jsfiddle.net/vqrdW/

Thanks for your help !

Answer 1

The problem is with this rule:

.button:active { 
   position: relative; 
   top: 3px;
}

As the button moves down by 3 pixels, when the mouse button is released, the cursor is not over the button so the action is not registered. If you comment out this chunk of code you can see that it fixes the problem.

Try instead to come up with a different effect for when the button is pressed that does not move the button to one side or another.

Answer 2

Add the padding on the a tag instead of the .button:

a.filter {
  padding: 8px 14px 10px;
}