Neumorphic button
You can add neumorphic elements to your site (such as buttons or cards) by applying three styling properties: the same background color as your site, a dark shadow and a lighter shadow on the opposite side.
To take it up a level, you can add a hover effect by adjusting your shadows to make it appear as if your element is floating in a neumorphic space.
Video transcript
A neomorphic button is usually made up of three different things, a matched background color, a drop shadow, and then another lighter drop shadow on the opposite side. But with neomorphism– "Morphism," is that how you say it?
[Micah] (laughs) No...
[Grimur] Okay. But if those are the first three steps, why do I have four on the screen? Because we’re going to take it a step further by adding hover and transitions to create ultimate neomorphism.
[Micah] Can we work on the pronunciation?
[Grimur] Neomorphic.
[Micah] Say “new”.
[Grimur] New.
[Micah] Now say “morphic.”
[Grimur] “Profic.” Let’s start with the background color. And I’m just going to use the eyedropper here to match it.
And that’s it. Step two? Shadow. Let’s add a drop shadow to the neumorphic button. And when we’re doing this, we can set properties on the shadow to getting it looking just right. (Of course, we can always go in and change this later, but the effect is based on two shadows and this is the first one.)
That’s part two. Next part. Second shadow. We’re just going to add one more shadow, but we’ll change the angle to the opposite side (we want it sort of offset from the first one). And since the first one is dark, let’s make this shadow color white.
Now here’s where a lot of people get stuck: if you have a white background color, this won’t work. Neumorphic buttons need the offset really clear. Darker than the background on one side; lighter than the background on the other.
But that’s it: "Neomorphic" button.
See? I got it now.
[Micah] Perfect.
[Grimur] For our bonus step, let's animate. So first, with our Button selected, we’ll go to the Hover state. Now, we don’t want to change our background color, but we do want the shadows to change a bit. So inside each of the shadows (while we’re in our Hover state), let’s adjust the look and feel to make sure we get the right kind of lift (the right kind of shadow) on hover.
And we want to do this to both shadows (we want to increase the size of our shadow). We can adjust all the shadow properties (distance, blur, size and even opacity), so we get that lift effect on hover.
Let’s hit Escape to go back to None and we can hover over on the canvas. And the Hover state looks good, but let’s transition it to look smooth and interpolated.
With our neumorphic button selected, let’s go to Transitions. We’ll add a box shadow transition (since that’s what we’re trying to animate), and we can even set the animation (the transition) duration. Preview?
That’s right. Neumorphic button.
[Micah] Neumorphic.
