WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulário de login e cadastro em HTML/CSS
45
rcampiao.curso
Abrir no Editor
Publique Seu Código
Recomendado
22 June 2025
Exemplo de formulário de login em HTML
19 July 2025
Fragmento HTML de animação de texto 3D
10 November 2024
Jogo da velha
HTML
Copy
Dark Login | Sign Up
Connexion
Se connecter
Pas de compte ?
Inscription
Inscription
Créer un compte
Déjà inscrit ?
Connexion
CSS
Copy
/* ---- RESET ---- */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: radial-gradient(circle at top, #0e0e0e, #050505); color: #fff; overflow: hidden; } /* ---- CONTAINER ---- */ .container { position: relative; width: 380px; height: 520px; background: rgba(20,20,20,0.95); border-radius: 20px; box-shadow: 0 0 40px rgba(0, 255, 200, 0.35); overflow: hidden; backdrop-filter: blur(10px); } /* ---- FORM ---- */ .form-box { position: absolute; width: 100%; height: 100%; padding: 40px; transition: 0.6s ease-in-out; opacity: 0; transform: translateX(100%); } .form-box h2 { text-align: center; margin-bottom: 25px; font-size: 2rem; letter-spacing: 1.5px; color: #00ffc6; text-shadow: 0 0 12px rgba(0, 255, 200, 0.7); } /* ---- INPUTS ---- */ .input-box { position: relative; width: 100%; margin: 20px 0; } .input-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: #00ffc6; opacity: 0.8; pointer-events: none; } .input-box input { width: 100%; padding: 12px 15px 12px 45px; border: none; border-radius: 10px; outline: none; font-size: 1rem; background: #111; color: #fff; transition: 0.3s; box-shadow: inset 0 0 5px rgba(0, 255, 200, 0.3); } .input-box input:focus { background: #0b0b0b; box-shadow: 0 0 15px #00ffc6; border: 1px solid #00ffc6; } /* ---- PASSWORD ANIMATION ---- */ .input-box input[type="password"]:focus { animation: pulse 1s infinite alternate; } @keyframes pulse { from { box-shadow: 0 0 10px #00ffc6; } to { box-shadow: 0 0 20px #00ffc6; } } /* ---- BUTTON ---- */ .btn { width: 100%; padding: 14px; margin-top: 25px; border: none; border-radius: 12px; font-size: 1rem; font-weight: bold; color: #000; background: linear-gradient(135deg, #00ffc6, #00e6ac); cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: 0 0 15px rgba(0, 255, 200, 0.5); } .btn:hover { transform: scale(1.03); background: linear-gradient(135deg, #00e6ac, #00ffc6); box-shadow: 0 0 25px rgba(0, 255, 200, 0.8); } /* ---- SWITCH ---- */ .switch { margin-top: 25px; text-align: center; font-size: 0.9rem; color: #ccc; } /* ---- LINK BUTTON ---- */ .link-btn { background: none; border: none; color: #00ffc6; font-weight: bold; font-size: 0.95rem; cursor: pointer; transition: 0.2s; } .link-btn:hover { color: #00e6ac; text-decoration: underline; } /* ---- FORM POSITIONS ---- */ #login { left: 0; transform: translateX(0); opacity: 1; transition: all 0.6s ease-in-out; } #signup { left: 0; /* même position que login */ transform: translateX(100%); opacity: 0; transition: all 0.6s ease-in-out; } .container.active #login { transform: translateX(-100%); opacity: 0; } .container.active #signup { transform: translateX(0); opacity: 1; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */