Let’s take a look at how to make 3D Javascript/CSS buttons with shadows, edges, and animations that move as you hover your mouse over them.
Join the DZone community and get the full member experience. Recently I was toying with the idea of a 3D button that moves as the user moves their mouse around it. To further this effect, I added some 3D shadows which move in tandem to give the illusion of a 3D button that is sitting off the page and moves with the user’s mouse movements. The fundamental concept behind these buttons is that we need to track when the user mouses over the button, moves, and mouses out. On mouseover, we will move the button so it appears 3D. On mouse out, we will reset it. Before we get to the Javascript, let’s make our button look good. Our HTML will look like this: And our CSS looks like this: You may have noticed that the third button has a background animation.
