Formulaire de connexion HTML avec style CSS néon

56 Skyrreum

Ouvrir dans l'éditeur Publiez votre code

Formulaire de connexion HTML avec style CSS néon

Recommandé

27 November 2024

Site Web de portfolio terminé

22 June 2025

Animation de basculement de triangle CSS

7 December 2025

Extrait HTML de liens vers les réseaux sociaux

HTML

<!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>

Recommandé

Site Web de portfolio terminé

Animation de basculement de triangle CSS

Extrait HTML de liens vers les réseaux sociaux

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS