Un codice per neumorfismo

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

29 December 2024

Un codice di creativearray554

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 codice per neumorfismo

Consigliato

Una Home page alternativa

Un codice di Mete

Un codice di creativearray554

HTML

CSS

JS

Consigliato

Una Home page alternativa

Un codice di Mete

Un codice di creativearray554

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS