Question

So I’m trying to use these CSS3 buttons taken from: http://lab.simurai.com/buttons/

Here is the button I’ve created: http://utvecklingspunkten.se/glist/admin/addGuests/button.php

As the title states the buttons function doesn’t always fire when clicked on. There are some spots/pixels which doesn’t seem to register the click (which is weird since the button still does change its appearance when clicked on these sweet spots – but it’s not firing its onClick function).

So here is the code I use to generate the button:

<div style="margin-left:500px; margin-top:100px;">
    <a href='#' class='button gray glossy' data-icon='✎' onClick='clickHandler()' />
Try clicking this button</a>
</div>

And the simple JavaScript:

var timesClicked = 0;

function clickHandler() {
    console.log("I've been clicked " + timesClicked + "times.");
    ++timesClicked;
}

The spot (rather at which height the spot is found) which doesn’t seem to register is located a few pixels below the baseline of the text in the button. Try clicking just below the text a few times with the console up (the click registers in the console) and notice when you find the spot. The sweet spot isn’t that hard to find and makes the button pretty useless since clicking on it at a certain height of the button won’t register.

Does anyone know why?

Answer 1

I see the problem when you drag you pointer where the mouse is clicked, so you can avoid this by change the onclick event by onmousedown event.