Make a neumorphism button in CSS

In this tutorial, I will show you how to Make a Beautiful Neumorphic button in HTML and CSS

HTML code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NeuMorphism box</title>

    <link rel="stylesheet" href="main.css">

</head>

<body>

    <div class="container">

        <button>BUTTON</button>

    </div>

</body>

</html>

CSS code

*{

    margin: 0;

    padding: 0;

    outline: 0;

}

body{

    background: #212121;

}

.container{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

}

.container button{

    width: 400px;

    padding: 30px 0;

    border-radius: 8px;

    border: none;

    border-radius: 50px;

    background: linear-gradient(145deg, #1e1e1e, #232323);

    box-shadow:  20px 20px 47px #0d0d0d, 

                 -20px -20px 47px #353535;

    color: #fafafa;

    transition: all 0.3s ease-out;

    font-size: 26px;

    font-family: 'Segoe UI', sans-serif;

    font-weight: bold;

    letter-spacing: 6px;

    text-align: center;

}

.container button:active{

    

    color: #fafafa;

    border-radius: 50px;

background: linear-gradient(145deg, #232323, #1e1e1e);

box-shadow:  20px 20px 47px #0d0d0d, 

             -20px -20px 47px #353535;

}