Formulaire de connexion HTML avec style CSS néon

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Login</title>
    <style>
        :root {
            --neon-primary: #00ffff; /* Cyan */
            --neon-secondary: #ff00ff; /* Magenta */
            --dark-bg: #020216;
            --mid-bg: #05052a;
            --font-stack: 'Consolas', 'Monospace', sans-serif;
        }

body {
            background-color: var(--dark-bg);
            color: var(--neon-primary);
            font-family: var(--font-stack);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            letter-spacing: 1.5px;
        }

/* Subtle background grid effect */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(0deg, transparent 98%, rgba(0, 255, 255, 0.1) 100%),
                linear-gradient(90deg, transparent 98%, rgba(0, 255, 255, 0.1) 100%);
            background-size: 40px 40px;
            opacity: 0.3;
            pointer-events: none;
        }

.login-container {
            width: 380px;
            padding: 40px;
            background-color: var(--mid-bg);
            border: 2px solid var(--neon-primary);
            box-shadow: 
                0 0 15px var(--neon-primary), 
                0 0 30px rgba(0, 255, 255, 0.5);
            transition: all 0.5s ease;
            position: relative;
            z-index: 10;
        }
        
        .system-title {
            text-align: center;
            font-size: 1.5em;
            margin-bottom: 30px;
            text-shadow: 0 0 10px var(--neon-primary);
            color: var(--neon-primary);
            border-bottom: 1px solid rgba(0, 255, 255, 0.5);
            padding-bottom: 10px;
        }

.input-group {
            margin-bottom: 20px;
        }

label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9em;
            color: var(--neon-secondary);
            text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
        }

input {
            width: calc(100% - 20px);
            padding: 10px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid var(--neon-primary);
            color: white;
            font-size: 1em;
            outline: none;
            box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3);
            transition: border 0.3s, box-shadow 0.3s;
        }

input:focus {
            border: 1px solid var(--neon-secondary);
            box-shadow: 0 0 15px var(--neon-secondary), inset 0 0 8px var(--neon-secondary);
        }

.login-button {
            width: 100%;
            padding: 15px;
            margin-top: 25px;
            background: var(--neon-primary);
            color: var(--dark-bg);
            border: none;
            cursor: pointer;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 1.1em;
            box-shadow: 0 0 20px var(--neon-primary);
            transition: background 0.3s, box-shadow 0.3s;
        }

.login-button:hover {
            background: #99ffff;
            box-shadow: 0 0 30px #99ffff;
        }

.status-message {
            text-align: center;
            margin-top: 30px;
            font-size: 0.8em;
            color: var(--neon-secondary);
            text-shadow: 0 0 5px var(--neon-secondary);
            animation: blink 1.5s infinite alternate;
        }
        
        @keyframes blink {
            from { opacity: 0.7; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>

<div class="login-container">
        <div class="system-title">
            ACCESS_FUTUR
        </div>
        <form class="login-form">
            <div class="input-group">
              <label for="id_matrix">Mail / Users:</label>
                <input type="text" id="id_matrix" required placeholder="Enter designation code">
            </div>
            <div class="input-group">
                <label for="auth_key">Password:</label>
                <input type="password" id="auth_key" required placeholder="Enter secure key">
            </div>
            <button type="submit" class="login-button">
                Log in
            </button>
            <div class="status-message">
                // SYSTEM STATUS: STANDBY_MODE [AWAITING INPUT]
            </div>
        </form>
    </div>

</body>
</html>

Formulaire de connexion HTML avec style CSS néon

Recommended

Liquid Glass Login Form HTML CSS

CSS Animated Button Hover Effect

HTML Restaurant Menu Template

HTML

CSS

JS

Recommended

Liquid Glass Login Form HTML CSS

CSS Animated Button Hover Effect

HTML Restaurant Menu Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS