Neumorphic button

Apply neumorphism to your site to achieve a soft UI design

This video features an old UI. Updated version coming soon!

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.

Neumorphism was born from skeuomorphism and went on to create an entirely new UX style. In this lesson, you’ll learn more about this style and how to create a button using the following:

Background color

When creating a neumorphic styled button - you want to have the background color of the button match the background color of whatever it is inside. For our example, we’ll match the default background color of a Button element to the section at the top of our project.

To match the background colors:

Add a Button element to your canvas
With the Button selected - give it a class name in the Selector field (e.g. “Button”)
In the Style panel - use the eyedropper to select the color of the section to change the color of the Button’s background to match

Now, you have a button that matches the background color of your top section.

Step one complete. Next, let’s add depth to our button by creating the first shadow (the drop shadow at the bottom-right of the button).

First shadow

Let’s add a drop shadow to the bottom-right of the neumorphic button. And when you’re doing this, you can set properties on the shadow to get it looking any way you like.

To add the first drop shadow:

With the Button selected - click the plus icon next to Box shadow in the Style panel
Change the Box shadow settings to fit your design (e.g. change the Distance, Blur, Size, and Color)

Giving the first shadow a darker color (e.g. #000000 or black) and then reduce the opacity of the darker color (e.g. changing the opacity to 80%) lets the shadow blend with the background color and look more realistic.

Second shadow

Let’s add one more shadow, but we’ll change the angle to the opposite side (we want it to offset from the first one). And since the first one is dark, let’s make the second shadow color lighter (e.g. #ffffff or white).

To add the second drop shadow:

With the Button selected - again, click the plus icon next to Box shadow in the Style panel to create a second shadow
Change the Box shadow settings to a lighter color (e.g. #ffffff or white)

Note: if you have a white background color, this won’t work. Neumorphic buttons need the shadow to be darker than the background on one side; lighter than the background on the other.

Animate on hover

Transitions help create a smooth animation between different states of an element.

Our goal for our example is this: we want the shadows to change a bit when the button is hovered to make it look like the button is lifted higher.

Hover state

With our Button selected, we’ll go to the Hover state.

And we can do this in two steps:

Click the drop-down arrow in the Selector field
Select the Hover state

Next, go to the Box shadow effects (while in the Hover state) to adjust the first and second shadows.

Increase the size of the shadow, and you can adjust all the shadow properties to get an effect on-hover that makes the button look like it’s lifted.

Press Escape to go back to the None state and you can preview the Hover state on the canvas.

Transition

Now, let’s create a transition to make the animation smooth and interpolated.

With our neumorphic button selected, go to the Transitions section in the Style panel. Add a Box-shadow transition (since that’s what we’re trying to animate), and we can set the animation duration.