न्यूमॉर्फिज्म द्वारा एक कोड

510 Neumorphism

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

15 May 2025

ashimadison8 द्वारा लिखित एक कोड

13 June 2025

मेटेहन द्वारा एक कोड

HTML

<!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>

न्यूमॉर्फिज्म द्वारा एक कोड

अनुशंसित

मेटे का एक कोड

ashimadison8 द्वारा लिखित एक कोड

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

ashimadison8 द्वारा लिखित एक कोड

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS