WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Ejemplo de formulario de inicio de sesión HTML con inicio de sesión social
48
Kolson913
Abrir en el editor
Publica tu código
1
Recomendado
29 May 2025
Un código de mathieu.ratro
11 March 2025
Formulario de inicio de sesión HTML avanzado
28 November 2024
Fondo animado de Matrix
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(); }