Un code par néomorphisme

1096 Neumorphism

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

4 March 2026

Une petite Coupe du monde

6 February 2026

Extrait de code HTML de la barre de recherche

24 September 2025

Code graphique interactif SVG Dragon

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>

Un code par néomorphisme

Recommandé

Une petite Coupe du monde

Extrait de code HTML de la barre de recherche

Code graphique interactif SVG Dragon

HTML

CSS

JS

Recommandé

Une petite Coupe du monde

Extrait de code HTML de la barre de recherche

Code graphique interactif SVG Dragon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS