WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated login and registration
2792
Andev.web
Open In Editor
Publish Your Code
Recommended
17 May 2025
modern login
25 August 2024
Login/signup form animation
3 March 2025
HTML CSS Event Registration System Website
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'));