Building a Magical 3D Button
Every significant thing we do online, from ordering food to scheduling an appointment to playing a video, involves pressing a button. Buttons (and the forms they submit) make the web dynamic and interactive and powerful.
But so many of those buttons are lackluster. They can trigger enormous changes in the real world, but they don't feel tangible at all. The feel like dull everyday pixels.
This is an intermediate-level tutorial for front-end developers. It's focused on HTML/CSS, no JavaScript knowledge required.
If you're relatively new to CSS transitions, I'd recommend reading “An Interactive Guide to CSS Transitions” first.
Here's how it works: when the user interacts with our button, we'll slide a foreground layer up and down, in front of a stationary background:
Why not use box-shadow or border? Those properties are super expensive to animate. If we want a buttery-smooth transition on the button, we'll have way more success with this strategy.
