WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Formulaire de connexion et d'inscription
8,483
alex
Ouvrir dans l'éditeur
Publiez votre code
3
Recommandé
12 December 2025
Site web portfolio cinématographique avec Tailwind CSS et GSAP
20 March 2026
Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux
29 October 2025
Exemple d'animation de bouton HTML CSS
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') }) })