WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML, Iniciar sesión Registrarse animado
2556
codekafe
Abrir en el editor
Video
Publica tu código
3
Recomendado
17 May 2025
inicio de sesión moderno
30 May 2023
Formulario de inicio de sesión/registro con CSS
9 December 2025
Diseño de formulario de inicio de sesión animado con CSS
HTML
Copy
Login & Register
Login
Masuk
Belum punya akun?
Daftar
Daftar
Daftar
Sudah punya akun?
Masuk
CSS
Copy
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Arial', sans-serif; background: linear-gradient(to right, #6a11cb, #2575fc); height: 100vh; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 400px; background: white; border-radius: 10px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); overflow: hidden; position: relative; } .form-container { padding: 20px; transition: all 0.5s ease; } h1 { margin-bottom: 20px; text-align: center; } input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; } button { width: 100%; padding: 10px; background: #6a11cb; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s ease; } button:hover { background: #2575fc; } span { display: block; text-align: center; margin-top: 10px; } .toggle { color: #6a11cb; text-decoration: none; } .toggle:hover { text-decoration: underline; } .register-container { display: none; }
JS
Copy
not js const loginContainer = document.querySelector('.login-container'); const registerContainer = document.querySelector('.register-container'); const toggleLinks = document.querySelectorAll('.toggle'); toggleLinks.forEach(link => { link.addEventListener('click', () => { loginContainer.classList.toggle('active'); registerContainer.classList.toggle('active'); }); });