Neumorphism Dark Submit 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>Neumorphism Dark Submit Button</title>
    <style>
        /* Basic reset and body styling for centering and dark theme */
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #2c2c2c; /* Dark background */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

/* Neumorphism Dark Submit Button Styling */
        .neumorphism-button {
            /* Base styles */
            background-color: #2c2c2c; /* Same as body for seamless integration */
            color: #f0f0f0; /* Light text color for contrast */
            padding: 18px 40px;
            border: none;
            border-radius: 15px; /* Rounded corners for soft look */
            font-size: 1.25em;
            font-weight: 600;
            cursor: pointer;
            outline: none; /* Remove default focus outline */
            transition: all 0.2s ease-in-out; /* Smooth transitions for hover/active */

/* Neumorphism shadows */
            /* Darker shadow (bottom-right, from a dark source) */
            /* Lighter shadow (top-left, mimicking light reflection on a dark surface) */
            box-shadow:
                7px 7px 14px rgba(0, 0, 0, 0.6),    /* Dark shadow */
                -7px -7px 14px rgba(60, 60, 60, 0.2); /* Light shadow (using a dark grey with low opacity for subtle effect) */
        }

/* Hover state: slight lift and intensified shadows */
        .neumorphism-button:hover {
            box-shadow:
                9px 9px 18px rgba(0, 0, 0, 0.7),
                -9px -9px 18px rgba(60, 60, 60, 0.3);
            transform: translateY(-3px); /* Subtle lift effect */
            color: #ffffff; /* Slightly brighter text on hover */
        }

/* Active (pressed) state: inset shadows for a "pushed in" effect */
        .neumorphism-button:active {
            box-shadow:
                inset 5px 5px 10px rgba(0, 0, 0, 0.6),   /* Inner dark shadow */
                inset -5px -5px 10px rgba(60, 60, 60, 0.1); /* Inner light shadow */
            transform: translateY(0); /* Reset lift */
            background-color: #2a2a2a; /* Slightly darker background when pressed */
            color: #dcdcdc; /* Slightly dimmer text when pressed */
        }

/* Focus state for accessibility (optional, but good practice) */
        .neumorphism-button:focus {
            box-shadow:
                0 0 0 4px rgba(100, 100, 255, 0.5), /* A subtle blue glow for focus */
                7px 7px 14px rgba(0, 0, 0, 0.6),
                -7px -7px 14px rgba(60, 60, 60, 0.2);
        }
    </style>
</head>
<body>
    <button type="submit" class="neumorphism-button">Submit</button>
</body>
</html>

Neumorphism Dark Submit Button

Recommended

Call Action Button Hover Effect

Dark and light button

Animated Download Button

HTML

CSS

JS

Recommended

Call Action Button Hover Effect

Dark and light button

Animated Download Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS