Soft UI Neumorphic Button - Free UI Component Template

Surface Color #e0e5ec

Text Color #4b5563

Button Label Press Me

Shadow Contrast (%) 20

Rounding (px) 30

Vertical Padding (rem) 1.25

Horizontal Padding (rem) 3.5

Font Size (rem) 1.1

Soft UI Neumorphic Button

A classic Neumorphic (Soft UI) button that blends seamlessly into its background. Features dual shadows to create realistic extrusion and recession effects.

<!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>
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --base: {{baseColor}};               /* Surface Color (Matches BG) */
            --intensity: {{shadowIntensity}};    /* Shadow Opacity Multiplier */
            --radius: {{borderRadius}}px;        /* Corner Rounding */
            --v-pad: {{vPadding}}rem;            /* Top/Bottom Padding */
            --h-pad: {{hPadding}}rem;            /* Left/Right Padding */
            --font-size: {{fontSize}}rem;        /* Text Size */
            --text-color: {{textColor}};         /* Text Color */
            
            /* Calculated Shadows */
            --dark-s: color-mix(in srgb, var(--base), black calc(var(--intensity) * 1%));
            --light-s: color-mix(in srgb, var(--base), white calc(var(--intensity) * 1%));
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--base);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

/* -- Button Implementation --------------------------------------- */
        .btn-neu {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--v-pad) var(--h-pad);
            font-size: var(--font-size);
            font-weight: 600;
            color: var(--text-color);
            background: var(--base);
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
            outline: none;
            
            /* Neumorphic Extruded Shadow */
            box-shadow: 
                8px 8px 16px var(--dark-s), 
                -8px -8px 16px var(--light-s);
        }

.btn-neu:hover {
            box-shadow: 
                4px 4px 8px var(--dark-s), 
                -4px -4px 8px var(--light-s);
            transform: scale(0.99);
        }

.btn-neu:active {
            /* Neumorphic Pressed/Inset Shadow */
            box-shadow: 
                inset 4px 4px 8px var(--dark-s), 
                inset -4px -4px 8px var(--light-s);
            transform: scale(0.97);
        }

</style>
</head>
<body>

<button class="btn-neu">
        {{buttonText}}
    </button>

</body>
</html>