WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux
168
Kolson913
Ouvrir dans l'éditeur
Publiez votre code
1
Recommandé
31 October 2025
Effet de texte glitch CSS
20 April 2025
Un code de Metehan
15 May 2025
Un code par kouadioarmel055
HTML
Copy
Webleb
Login
Email
Password
Connect with
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"); body { background: #3f2b96; font-family: "Inter", "DM Sans", Arial, sans-serif; } form#login-form { background: #fff; width: 38em; margin: 2em auto; overflow: hidden; position: relative; border-radius: 0.3em; } form#login-form div.heading { background: #000000; color: #fff; text-align: center; text-transform: uppercase; font-weight: bold; padding: 1.5em; font-size: 1.1em; } form#login-form div.left { width: 50%; float: left; padding: 1.7em 1.5em 2.5em 1.5em; box-sizing: border-box; } div.left label { display: inline-block; color: gray; font-size: 1.1em; margin-top: 0.6em; } div.left input[type="email"], div.left input[type="password"] { border: 0.1em solid #dfdfdf; padding: 1em; margin: 0.6em 0; max-width: 88.5%; outline: none; border-radius: 5px; } div.left input[type="submit"] { background: #000000; color: #fff; outline: none; padding: 1em; overflow: hidden; border: none; letter-spacing: 0.1em; margin: 0.5em 0; border-radius: 0.4em; width: 50%; cursor: pointer; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, hr, input { overflow: visible; } user agent stylesheet input:not([type="range"]):not([type="color"]) { writing-mode: horizontal-tb !important; } form#login-form div.right { width: 50%; float: right; padding: 1.7em 1.5em 2.5em 1.5em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } div.right div.connect { color: gray; font-size: 1.1em; text-align: center; } div.right a.facebook { background: #3a589a; margin-top: 0.8em; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a.google { background: #d1231a; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a.github { background: #000000; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a { display: inline-block; font-size: 1.5em; text-decoration: none; color: white; width: 9em; padding: 0.55em 0.3em; clear: both; text-align: center; margin: 0.5em 0.1em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; }
JS
Copy
const buttonsComponent = document.querySelector('.buttons'); const buttonsToggle = document.querySelector('.buttons__toggle'); buttonsToggle.addEventListener('click', toggleButtons); function toggleButtons() { buttonsToggle.classList.toggle('buttons__toggle--active'); buttonsComponent.classList.toggle('buttons--active'); document.activeElement.blur(); }