Does the built-in block affect the clickability of links?

Question

For several sites, I used CSS3 Bon Bon buttons, which allow you to display buttons with a 3D effect. I often use them for links <a></a> .

Everything works fine, except when display: inline-block is applied, this does not always seem to be correct. Sometimes (but not always) you may need to press a button 3 or 4 times before it registers. Another time, the exact same button will click immediately. This is similar to all browsers and platforms.

Why is this a solution? If I set it to display block , it works fine, but there are situations when display:block not perfect.

JSFiddle ( Code ) ( Live example )

Answer 1

I think using display: block; can fill in additional loose space inside your button, so when switching to a display: built-in block; the inline element neglects to fill in the extra space.

Your example is very dense and complicated to understand what is happening, given the CSS used to render the button. Do not think that you could provide a revised version that would make it easier to see what is happening?

Answer 2

Well after debugging for a while, I know what causes it. I don’t know why, some expert may try to explain this. IN

 .cta-primary:active, .cta-secondary:active 

It contains

 -webkit-transform: translateY(0.2em); -moz-transform: translateY(0.2em); -ms-transform: translateY(0.2em); -o-transform: translateY(0.2em); transform: translateY(0.2em); 

I deleted it and it works. I do not know why this interferes, but it is. Perhaps because the translation moves the element for this active millisecond, and the click does not actually press the button, but visually you cannot say because it is too fast. If you replace 0.2em with 0, it will also work, since it will not move the element. Hope this is what you are looking for.