Formulaire de connexion néomorphique (code HTML et CSS)

689 linoscott95

Ouvrir dans l'éditeur Video Publiez votre code

Formulaire de connexion néomorphique (code HTML et CSS)

Recommandé

17 January 2026

Portfolio de développeur web : HTML, CSS, JavaScript, UI/UX

13 March 2025

Metehan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Neomorphism Login</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        /* Base Colors & Variables for Neomorphism */
        :root {
            --bg-color: #e0e0e0;
            --light-shadow: #ffffff;
            --dark-shadow: #a3b1c6;
            --main-text-color: #333;
            --accent-color: #6a67ce; /* A pleasant purple */
            --accent-hover: #7b78e4;
            --accent-active: #5c59b9;
        }

/* Global Styles */
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, var(--bg-color) 0%, #cacaca 50%, var(--bg-color) 100%);
            background-size: 400% 400%; /* Larger size for animation */
            animation: backgroundAnimation 15s ease infinite alternate; /* Slow, smooth animation */
            color: var(--main-text-color);
            overflow: hidden; /* Prevent scrollbar if background moves slightly */
        }

/* Background Animation */
        @keyframes backgroundAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* Login Container */
        .login-container {
            background: var(--bg-color);
            padding: 40px;
            border-radius: 30px;
            box-shadow: 10px 10px 20px var(--dark-shadow),
                        -10px -10px 20px var(--light-shadow);
            text-align: center;
            width: 350px;
            max-width: 90%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            z-index: 1; /* Ensure it's above potential pseudo-elements */
        }

.login-container:hover {
            transform: translateY(-5px); /* Subtle lift on hover */
            box-shadow: 15px 15px 30px var(--dark-shadow),
                        -15px -15px 30px var(--light-shadow);
        }

.login-container h2 {
            font-size: 2.5em;
            margin-bottom: 30px;
            color: var(--main-text-color);
            text-shadow: 1px 1px 2px var(--light-shadow);
            font-weight: 700;
        }

/* Form Group (Label + Input) */
        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--main-text-color);
            font-size: 0.95em;
        }

/* Input Fields */
        .form-group input {
            width: calc(100% - 40px); /* Adjust for padding */
            padding: 15px 20px;
            border: none;
            outline: none;
            border-radius: 15px;
            background: var(--bg-color);
            font-size: 1em;
            color: var(--main-text-color);
            box-shadow: inset 5px 5px 10px var(--dark-shadow),
                        inset -5px -5px 10px var(--light-shadow);
            transition: box-shadow 0.3s ease, transform 0.2s ease;
            font-weight: 400;
        }

.form-group input::placeholder {
            color: rgba(51, 51, 51, 0.6);
        }

.form-group input:focus {
            box-shadow: inset 3px 3px 7px var(--dark-shadow),
                        inset -3px -3px 7px var(--light-shadow),
                        0 0 0 3px var(--accent-color); /* Subtle accent ring on focus */
            transform: scale(1.01); /* Slightly enlarge on focus */
        }

/* Login Button */
        .login-button {
            width: 100%;
            padding: 18px;
            border: none;
            outline: none;
            border-radius: 25px;
            background: var(--accent-color);
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 7px 7px 15px var(--dark-shadow),
                        -7px -7px 15px var(--light-shadow);
            transition: all 0.3s ease;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

.login-button:hover {
            background: var(--accent-hover);
            box-shadow: 10px 10px 20px var(--dark-shadow),
                        -10px -10px 20px var(--light-shadow);
            transform: translateY(-3px); /* Subtle lift */
        }

.login-button:active {
            background: var(--accent-active);
            box-shadow: inset 3px 3px 7px var(--dark-shadow),
                        inset -3px -3px 7px var(--light-shadow);
            transform: translateY(1px); /* Press down effect */
        }

/* Forgot Password / Sign Up links */
        .links {
            margin-top: 25px;
            font-size: 0.9em;
            font-weight: 400;
        }

.links a {
            color: var(--accent-color);
            text-decoration: none;
            margin: 0 10px;
            transition: color 0.3s ease, text-decoration 0.3s ease;
        }

.links a:hover {
            color: var(--accent-active);
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required>
            </div>
            <button type="submit" class="login-button">Login</button>
        </form>
        <div class="links">
            <a href="#">Forgot Password?</a>
            <span>•</span>
            <a href="#">Sign Up</a>
        </div>
    </div>
</body>
</html>

Formulaire de connexion néomorphique (code HTML et CSS)

Recommandé

Portfolio de développeur web : HTML, CSS, JavaScript, UI/UX

Un code par lebdev

Metehan

HTML

CSS

JS

Recommandé

Portfolio de développeur web : HTML, CSS, JavaScript, UI/UX

Un code par lebdev

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS