WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML, Login Register animated
2071
codekafe
Open In Editor
Publish Your Code
Recommended
18 June 2023
Simple Login Form
19 October 2024
Animated HTML and CSS Input
23 May 2025
Card login
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'); }); });