Apply neumorphism to your site to achieve a soft UI design
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:
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:
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).
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:
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.
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:
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.
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.
With our Button selected, we’ll go to the Hover state.
And we can do this in two steps:
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.
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.