WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulario de inicio de sesión moderno V2
1035
TheDoc
Abrir en el editor
Video
Publica tu código
0
Recomendado
17 May 2024
Formulario de inicio de sesión sencillo
18 May 2024
Formulario de inicio de sesión multicolor
10 October 2025
Estructura HTML del contenedor de animación CSS
HTML
Copy
Login Form
Login
Username
Password
Forgot password?
Login
CSS
Copy
body { min-height: 100vh; margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); display: flex; align-items: center; justify-content: center; } .login-container { background: linear-gradient(135deg, #ffffffcc 0%, #f3f3f3cc 100%); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18); border-radius: 20px; padding: 40px 24px; /* etwas weniger Padding */ width: 350px; backdrop-filter: blur(4px); } h2 { text-align: center; margin-bottom: 24px; margin-top: 5px; /* Abstand nach oben */ color: #2575fc; letter-spacing: 1px; font-family: 'Segoe UI', Arial, sans-serif; font-weight: 700; font-size: 2rem; } .input-group { margin-bottom: 18px; position: relative; } .input-group label { display: block; text-align: center; font-size: 1.08rem; font-weight: 500; color: #2575fc; margin-bottom: 10px; /* mehr Abstand zum Eingabefeld */ margin-top: 0; letter-spacing: 0.5px; } .input-group input[type="text"], .input-group input[type="password"] { width: 100%; box-sizing: border-box; padding: 12px 14px; /* Icon-Padding entfernt */ border: none; border-radius: 12px; font-size: 1.05rem; margin-bottom: 2px; box-shadow: 0 4px 18px rgba(80, 120, 200, 0.13), 0 1.5px 0 #fff inset; transition: background 0.2s, box-shadow 0.2s, border 0.2s, filter 0.5s; border: 2px solid transparent; position: relative; z-index: 1; } .input-group input[type="text"]:focus, .input-group input[type="password"]:focus { background: linear-gradient(90deg, #e3eafc 0%, #d0d8f6 100%); outline: none; border: 2px solid #6a11cb; box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #fff); animation: glow-move 1.2s linear infinite; } @keyframes glow-move { 0% { box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #fff); } 50% { box-shadow: 0 0 12px 8px rgba(255,255,255,0.9), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset; filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 32px #fff); } 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.7), 0 6px 24px rgba(80, 120, 200, 0.22), 0 1.5px 0 #fff inset; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #fff); } } button[type="submit"] { width: 100%; padding: 14px; background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%); color: #fff; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: bold; cursor: pointer; margin-top: 18px; /* Abstand wie bei .input-group */ box-shadow: 0 2px 8px rgba(80, 120, 200, 0.13); transition: background 0.2s, transform 0.1s; } button[type="submit"]:hover { background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%); transform: translateY(-2px) scale(1.02); } #message { margin-top: 16px; text-align: center; color: #e74c3c; font-size: 1rem; min-height: 22px; } .forgot-password { display: block; text-align: center; /* statt right */ margin-top: -6px; margin-bottom: 10px; font-size: 0.98rem; color: #2575fc; text-decoration: none; transition: color 0.2s; font-weight: 500; cursor: pointer; } .forgot-password:hover { color: #6a11cb; text-decoration: underline; }
JS
Copy
document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value.trim(); const password = document.getElementById('password').value; const message = document.getElementById('message'); // Dummy login check (replace with real logic) if (username === "user" && password === "pass") { message.style.color = "#27ae60"; message.textContent = "Login successful!"; } else { message.style.color = "#e74c3c"; message.textContent = "Username or password incorrect."; } });