Neumorphic Buttons Design with CSS

In this tutorial we will see how to make Neumorphic Buttons Design with CSS. Simple CSS is used for this purpose, HTML code and CSS code is given.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

HTML Code

HTML Code is given below.

<button class="buttons">Neumorphic</button>    
<button class="buttons">Buttons</button>    
<button class="buttons">With</button>    
<button class="buttons">CSS</button>  

CSS Code

CSS Code is given below.

<style>
*
{
    font-family: 'Barlow Condensed', sans-serif;
}
body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #ddd;
}
.buttons
{
    background-color: #ddd;
    color: #555;
    font-size: 20px;
    padding: 15px 40px;
    border-radius: 5px;
    font-weight: bold;
    margin: 0px 10px;
    box-shadow: 1px 1px 5px 0px #bbb;
    border-bottom: 2px solid #bbb;
    border-right: 2px solid #bbb;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    outline: none;
    cursor: pointer;
}
.buttons:hover
{
    box-shadow: none;
}
</style>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Neumorphic Buttons Design with CSS.