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

994 linoscott95

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

21 April 2025

Un code de Metehan

27 May 2025

Page de contact futuriste

25 July 2025

Le safari de microinteraction

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>

CSS