WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated login and registration
2737
Andev.web
Open In Editor
Publish Your Code
Recommended
6 October 2024
Animated Label Input Tag
22 April 2025
A Code by andres.stahr
18 May 2024
Blur login form
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'));