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.<\/b>
\nJoin 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\u2019s 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\u2019s 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. If you\u2019re interested in how I did that, I used a pseudo-element that is moving via animation. The pseudo-element has a simple gradient, and the overflow is hidden. You can test this out yourself by removing overflow: hidden from the span and button elements. Let\u2019s take a look at our Javascript now. You may have noted we have two elements for our button: the button itself and a span inside of it. There is a good reason for this \u2014 this lets us apply 3D perspective on the parent, which is required for the effect to work. It also allows us to target the parent for the hover effect. If we use hover on the child, the effect will bug out as the child will rotate, and we will miss the hitbox. I am using a function that uses the event variable (e) and references both the span (noted here as item) and the button (referenced as parent). Effectively this splits the button into four quadrants. The midpoint represents an angle of change on the X and Y axis of 0, while a movement to the left results in a more negative Y angle, and a more positive one to the right. The same applies for X, where moving the cursor up turns the X angle more positive, and down, more negative. Some things worth noting: To apply our function to each button, we simply iterate through them all with forEach. With that, we have recreated the effect shown at the start of the article. We hope you\u2019ve enjoyed this guide. Published at DZone with permission of Johnny Simpson, DZone MVB. See the original article here. Opinions expressed by DZone contributors are their own.<\/p>\n