Neumorphism button CSS tutorial

Neumorphism is the latest design trend in 2020. In this tutorial, we will explore this design by creating a button using HTML and CSS.

This design has got a quite of a lot of attention and you might have seen it in designs shared by designers on sites like dribbble.com

It all started with a dribbble shot of alexplyuto(shown below) which went viral.

Dribbble shot showing neumorphism design
Dribbble shot by alexplyuto

Watch YouTube tutorial video

Lets get started coding our Neumorphic button.

Button HTML markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism Button</title>
</head>
<body class="flex-center">
    
    <button class="neu-shadow">Hello 👋</button>

</body>
</html>

Our HTML markup basically consists of body element which has “flex-center” class which we will use in the CSS to center all the content of the body element horizontally and vertically.

Body element contains a single button element on which the “neu-shadow” class is applied.

This class will set the box-shadow for the button element and will give it the neumorphism look as you will see while following along the CSS rules section.

Neumorphism button CSS rules

body {
    margin: 0;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body, button {
    background-color: #f1f3f8;
}

button {
    border: 0;
    padding: 8px 20px;
    outline: transparent;
    font-weight: bold;
    color: #3f5185;
    border-radius: 100px;
    font-size: 18px;
    cursor: pointer;
}

.neu-shadow {
    box-shadow: 10px 10px 20px #e0e2e5, -10px -10px 20px #fff;
}

.neu-shadow:active {
    box-shadow: 2px 2px 2px 0 #dfe4ea inset, -2px -2px 2px 0 #fff inset;
}

button:active {
    position: relative;
    top: 1px;
}

Live demo

We have completed our coding part so lets have a look at the output:

If you enjoyed this post then you will love the CSS trick for creating a ripple effect as well: https://webslake.com/article/creating-ripple-effect-on-click-only-using-css/

Newsletter Updates

Enter your name & email address below to subscribe to our newsletter

Leave a Reply