The buttons on CSS-Tricks, at the time of this video, have a faux 3D effect. They look like a blue brick you are looking at from above at an angle. When you press down on them, their :active state is triggered (like all links/buttons/inputs) and the CSS moves them down and to the right, appearing as if you are literally pressing the brick down into the surface a bit.
What’s the problem? When you move an element like that (in this case, transform: translate(3px, 3px);
) you are changing the area in which that press will trigger the “click” DOM event. If the location of that press happens to be in an area now outsize of that “clickable” area, it won’t trigger. So the button looks pressed, but never actually becomes pressed. That’s weird and bad and unexpected behavior.
The effect is still cool though, so in this video we fix it by moving a pseudo element to fill the space left behind, making the “clickable” area always the same.
Check out the demo Pen.
Hi Chris,
I tried your solution in the latest Firefox version and some IE version but it still is a little buggy.
Moving the button is not a good plan I think especially when you have a large shadow because how larger the shadow the more that’s not really firing the form.
I get the same thing here. The solution on codepen works great in Chrome and Opera. But in Firefox 20 and IE9 it still fails to register a click event.
I fixed this problem, Insert text in span in and apply position: relative to that span
button {
position: relative;
}
Altough it says mousedown in this preview, is this fix applied to the three buttons in the right sidebar (Sign up!, RSS and iTunes)?
They seem to have the problem stated above, with Chrome.
Great post! I had based the buttons for my companies new website on your BERG Cloud Buttons post. I’ve been extremely frustrated with how the click event wouldn’t always fire if you pressed down on the edge of the button, but haven’t had time to look into fixing it.
I’ll see if this solution helps!
Can you Provide a FF & IE9+ Option/Fallback for these – Maybe an update in written form to this post please Chris. Love this style but too new too css to work out how I can make an option for these other browsers.
Love the site…
Jayism – @Code_Collective
This will also solve trigger issue ;)
$(“button”).on(“mousedown”, function() {
$(“#message”).text(“mousedown”);
$(this).click();
});
btw, this issue become even worse if you have an html inside your button. For example try to click on top border of span in this example. Click event doesn’t work in the middle of button, not only edge in this case. But this trick seems to fix that issue too, thanks!
Could you just increase/decrease left/top invisible borders? It should push against the positioning and still be a clickable element part. I would be interested if this worked.
Hey,
this trick seems not to be working with input type button.
Do you have a solution ?
“:after” element doesn’t work on inputs. Does anyone have an idea to solve this problem?
Here’s some grouping:
http://codepen.io/gerritvanesch/pen/DcLGb
Thanks for sharing, Chris. As mentioned earlier, this won’t work with input:submit buttons. Here’s some jQuery that should solve the problem across the board:
I””””’I””””””””””””””””””””””””””””””””I
””””””””””””””””””””””””””””””””””””””
HELLO THERE, Is any one can help me with this post box with an Icon bar attached to the left side to the post box
and the icon bar is changeable… for example, I want to post something about NBA games but the button has three (3) option by clicking the arrow down,, choices are NBA, MLB & NFL… So, to post my shout out I have to click NBA,
then when my shout out is posted, the NBA button will be attached to the post box..
Hope someone can help me with this.. Im just a junior web developer…
many thanks..