Um Código por Neumorfismo

214 Neumorphism

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

26 April 2025

Carrossel de Portfólio com Deslizadores Sincronizados

20 December 2024

Um código por staticclass394

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>

Um Código por Neumorfismo

Recomendado

Um Código por shasshan7236

Carrossel de Portfólio com Deslizadores Sincronizados

Um código por staticclass394

HTML

CSS

JS

Recomendado

Um Código por shasshan7236

Carrossel de Portfólio com Deslizadores Sincronizados

Um código por staticclass394

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS