Push button with css3 and jQuery

CSS3 Only

As you hover over the button a text link is revealed with a push. This is all good and well, however, as far as I can tell there is no way to achieve this effect without triggering a hover over the whole button. Currently there is no option to select a parent element using CSS so the text being pushed out of the box has to be contained within the hovered element. This means the button will push across when the mouse enters any part. This is fine if you don’t actually need to click on the content initially shown within the button.

CSS3 and jQuery

The only solution I could come up with was to trigger a class on hover using jQuery. As you can see you are now able to mouse around within the button freely. The push is activated when hovering the final element on the button.

Leave a Reply