Generate Button

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphic Generate Button</title>
    <style>
        body {
            background-color: #E0E5EC;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

.button {
            width: 200px;
            height: 60px;
            border-radius: 30px;
            background-color: #E0E5EC;
            box-shadow:  9px 9px 16px #A3B1C6,
                         -9px -9px 16px #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: sans-serif;
            font-weight: bold;
            color: #707070;
            cursor: pointer;
            user-select: none;
        }

.button:active {
             box-shadow: inset 9px 9px 16px #A3B1C6,
                         inset -9px -9px 16px #FFFFFF;
        }
    </style>
</head>
<body>
    <div class="button">Generate</div>
</body>
    <script src="script.js>
       
    </script>
    
</html>

Generate Button

Recommended

KEVAKIB LOGIN

Neon Glass Context Menu with Color Picker

Card style

HTML

CSS

JS

Recommended

KEVAKIB LOGIN

Neon Glass Context Menu with Color Picker

Card style

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS