WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated login and registration
3395
Andev.web
Open In Editor
Publish Your Code
Recommended
17 July 2025
3D Rotating Login Signup Form HTML CSS
18 May 2024
Hacker login form
22 November 2024
Landing Page - God of War
HTML
Copy
Iniciar sesión y registrarse
Andev web
Iniciar sesión
Iniciar sesión
Correo electrónico
Contraseña
Recordarme
¿Olvidaste la contraseña?
Iniciar sesión
¿No tienes una cuenta?
Registrarse
Registro
Nombre de usuario
Correo electrónico
Contraseña
Acepto los términos y condiciones
Registrarse
¿Ya tienes una cuenta?
Iniciar sesión
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-size: cover; background: url('https://images.unsplash.com/photo-1716654195483-de7a5ad4d23c?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center; } header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 100px; display: flex; justify-content: space-between; align-items: center; z-index: 99; } .logo { font-size: 2em; color: #ffffff; user-select: none; } .navigation a { position: relative; font-size: 1.1em; color: #ffffff; text-decoration: none; font-weight: 500; margin-left: 40px; } .navigation a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 3px; background: #ffffff; border-radius: 5px; transform-origin: right; transform: scaleX(0); transition: transform .5s; } .navigation a:hover::after { transform-origin: left; transform: scaleX(1); } .navigation .bthLogin-popup { width: 130px; height: 50px; background: transparent; border: 2px solid #ffffff; outline: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; color: #ffffff; font-weight: 500; margin-left: 40px; transition: .5s; } .navigation .bthLogin-popup:hover { background: #ffffff; color: #162938; } .wrapper { position: relative; width: 400px; height: 440px; background: transparent; border: 2px solid rgba(255, 255, 255, .5); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: center; overflow: hidden; transform: scale(0); transition: transform .5s ease, height .2s ease; } .wrapper.active-popup { transform: scale(1); } .wrapper.active { height: 520px; } .wrapper .form-box { width: 100%; padding: 40px; } .wrapper .form-box.login { transition: transfrom .18s ease; transform: translateX(0); } .wrapper.active .form-box.login { transition: none; transform: translateX(-400px); } .wrapper .form-box.register { position: absolute; transition: none; transform: translateX(400px); } .wrapper.active .form-box.register { transition: transfrom .18s ease; transform: translateX(0); } .wrapper .icon-close { position: absolute; top: 0; right: 0; width: 45px; height: 45px; background: #162938; font-size: 2em; color: #ffffff; display: flex; justify-content: center; align-items: center; border-bottom-left-radius: 20px; cursor: pointer; z-index: 1; } .form-box h2 { font-size: 2em; color: #ffffff; text-align: center; } .input-box { position: relative; width: 100%; height: 50px; border-bottom: 2px solid #ffffff; margin: 30px 0; } .input-box label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); font-size: 1em; color: #ffffff; font-weight: 500; pointer-events: none; transition: .5s; } .input-box input:focus ~ label, .input-box input:valid ~ label { top: -5px; } .input-box input { width: 100%; height: 100%; background: transparent; border: none; outline: none; font-size: 1em; color: #ffffff; font-weight: 600; padding: 0 35px 0 5px; } .input-box .icon { position: absolute; right: 8px; font-size: 1.2em; color: #ffffff; line-height: 57px; } .remember-forgot { font-size: .9em; color: #ffffff; font-weight: 500; margin: -15px 0 15px; display: flex; justify-content: space-between; } .remember-forgot label input { accent-color: #ffffff; margin-right: 3px; } .remember-forgot a { color: #ffffff; text-decoration: none; } .remember-forgot a:hover { text-decoration: underline; } .bth { width: 100%; height: 45px; background: #ffffff; border: none; outline: none; border-radius: 6px; cursor: pointer; font-size: 1em; color: #162938; font-weight: 500; } /*Andev Web*/ .login-register { font-size: .9em; color: #fff; text-align: center; font-weight: 500; margin: 25px 0 10px; } .login-register p a { color: #fff; text-decoration: none; font-weight: 600; } .login-register p a:hover { text-decoration: underline; }
JS
Copy
const wrapper = document.querySelector('.wrapper'); const loginLink = document.querySelector('.login-link'); const registerLink = document.querySelector('.register-link'); const bthPopup = document.querySelector('.bthLogin-popup'); const iconClose = document.querySelector('.icon-close'); registerLink.addEventListener('click', () => wrapper.classList.add('active')); loginLink.addEventListener('click', () => wrapper.classList.remove('active')); bthPopup.addEventListener('click', () => wrapper.classList.add('active-popup')); iconClose.addEventListener('click', () => wrapper.classList.remove('active-popup'));