Neumorphic button

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: 

1. Background color
2. First shadow
3. Second shadow
4. Animate hover

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:

1. Add a Button element to your canvas
2. With the Button selected - give it a class name in the Selector field (e.g. “Button”)
3. 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:

1. With the Button selected - click the plus icon next to Box shadow in the Style panel
2. 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:

1. With the Button selected - again, click the plus icon next to Box shadow in the Style panel to create a second shadow
2. 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:

1. Click the drop-down arrow in the Selector field
2. 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.

That’s it! That’s how to create a neumorphic button in Webflow.