Neumorphism. Very polarizing. But very satisfying.
Go ahead, touch this button.
Whether you like it or not, here’s how to animate a neumorphic button with CSS only™.
In CSS, neumorphism leans on two box shadows. I’ll call them the raised shadow and the pressed shadow.
They’re really the same shadow, one of them is just inset. The first provides an element with the appearance of being raised off the page. The second makes things look pressed into the page.
BUT, you can’t animate between a normal and inset shadow.
Instead, apply both shadows to the target element, one on the
:before pseudo-element, and one on the
:after. Then animate the opacity of these pseudo-elements.
The key to realism is to first transition to no box shadow. When you press a button in real life, the button becomes flush with the surface before it is pressed into it.
This transition keyframe can be achieved via a
Here’s the full CSS.
For extra realism, transform the scale of the button’s content to 0.97 while the button is active. This enhances the 3D effect by making it seem like the text of the button is farther from you when pressed.
Try it yourself
Here’s a Glitch project with this code that you can edit: neumorphism.glitch.me