WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Login and Register Form
8007
alex
Open In Editor
Publish Your Code
Recommended
15 September 2024
Beauty and the Beast Enchanted Rose
25 July 2025
3D Login Signup Box HTML CSS
23 August 2025
Login & Register Form HTML CSS Template
HTML
Copy
Login/Register
Login
Please, enter your email and password for login.
E-mail
Password
Login
Sign Up
Please, enter your email, password and password confirmation for sign up.
E-mail
Password
Confirm password
Continue
CSS
Copy
*, *::before, *::after { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; color: #ffeba7; background-color: #1f2029; overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(ellipse at bottom, #1B2735 0%, #12141d 100%); } .forms-section { display: flex; flex-direction: column; justify-content: center; align-items: center; } .forms { display: flex; align-items: flex-start; margin-top: 30px; } .form-wrapper { animation: hideLayer .3s ease-out forwards; } .form-wrapper.is-active { animation: showLayer .3s ease-in forwards; } @keyframes showLayer { 50% { z-index: 1; } 100% { z-index: 1; } } @keyframes hideLayer { 0% { z-index: 1; } 49.999% { z-index: 1; } } .switcher { position: relative; cursor: pointer; display: block; margin-right: auto; margin-left: auto; padding: 0; text-transform: uppercase; font-family: inherit; font-size: 16px; letter-spacing: .5px; color: #999; background-color: transparent; border: none; outline: none; transform: translateX(0); transition: all .3s ease-out; } .form-wrapper.is-active .switcher-login { color: #fff; transform: translateX(90px); } .form-wrapper.is-active .switcher-signup { color: #fff; transform: translateX(-90px); } .form { overflow: hidden; min-width: 260px; margin-top: 50px; padding: 30px 25px; border-radius: 5px; transform-origin: top; } .form-login { animation: hideLogin .3s ease-out forwards; } .form-wrapper.is-active .form-login { animation: showLogin .3s ease-in forwards; } @keyframes showLogin { 0% { background: #d7e7f1; transform: translate(40%, 10px); } 50% { transform: translate(0, 0); } 100% { background-color: #fff; transform: translate(35%, -20px); } } @keyframes hideLogin { 0% { background-color: #fff; transform: translate(35%, -20px); } 50% { transform: translate(0, 0); } 100% { background: #d7e7f1; transform: translate(40%, 10px); } } .form-signup { animation: hideSignup .3s ease-out forwards; } .form-wrapper.is-active .form-signup { animation: showSignup .3s ease-in forwards; } @keyframes showSignup { 0% { background: #d7e7f1; transform: translate(-40%, 10px) scaleY(.8); } 50% { transform: translate(0, 0) scaleY(.8); } 100% { background-color: #fff; transform: translate(-35%, -20px) scaleY(1); } } @keyframes hideSignup { 0% { background-color: #fff; transform: translate(-35%, -20px) scaleY(1); } 50% { transform: translate(0, 0) scaleY(.8); } 100% { background: #d7e7f1; transform: translate(-40%, 10px) scaleY(.8); } } .form fieldset { position: relative; opacity: 0; margin: 0; padding: 0; border: 0; transition: all .3s ease-out; } .form-login fieldset { transform: translateX(-50%); } .form-signup fieldset { transform: translateX(50%); } .form-wrapper.is-active fieldset { opacity: 1; transform: translateX(0); transition: opacity .4s ease-in, transform .35s ease-in; } .form legend { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); } .input-block { margin-bottom: 20px; } .input-block label { font-size: 14px; color: #a1b4b4; } .input-block input { display: block; width: 100%; margin-top: 8px; padding-right: 15px; padding-left: 15px; font-size: 16px; line-height: 40px; color: #3b4465; background: #eef9fe; border: 1px solid #cddbef; border-radius: 2px; } .btn { opacity: 0; display: block; min-width: 280px; margin: 30px auto 10px; font-size: 18px; line-height: 40px; border-radius: 10px; border: none; cursor: pointer; transition: all .3s ease-out; color: #a7e245; background: #fbfdff; box-shadow: inset 0 0 0 2px #a7e245; transform: translateX(30%); } .form-wrapper.is-active .form [type='submit'] { opacity: 1; transform: translateX(0); transition: all .4s ease-in; }
JS
Copy
const switchers = [...document.querySelectorAll('.switcher')] switchers.forEach(item => { item.addEventListener('click', function() { switchers.forEach(item => item.parentElement.classList.remove('is-active')) this.parentElement.classList.add('is-active') }) })