WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modèle de formulaire de connexion le plus simple
1929
btn7
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
11 September 2025
Calques d'animation CSS : Alerte et Joie
29 January 2025
Un code par sheeshokaokayokay
27 November 2024
Page de destination - Modèle IA
HTML
Copy
Login Form
Login
CSS
Copy
.align { display: grid; place-items: center; } :root { --gridMaxWidth: 24em; --gridWidth: 90%; } .grid { inline-size: var(--gridWidth); margin-inline: auto; max-inline-size: var(--gridMaxWidth); } .icon { block-size: 1.25em; display: inline-block; inline-size: 1.25em; line-height: 1.25em; margin-right: 0.625em; text-align: center; vertical-align: middle; } .icon--info { background-color: #e5e5e5; border-radius: 50%; } :root { --bodyBackgroundColor: #eaeaea; --bodyColor: #999; --bodyFontFamily: "Helvetica", "Arial"; --bodyFontFamilyFallback: sans-serif; --bodyFontSize: 0.875rem; --bodyFontWeight: 400; --bodyLineHeight: 1.5; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } body { background-color: var(--bodyBackgroundColor); font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback); font-size: var(--bodyFontSize); font-weight: var(--bodyFontWeight); line-height: var(--bodyLineHeight); margin: 0; min-block-size: 100vh; } :root { --anchorColor: inherit; --anchorHoverColor: #1dabb8; } a { color: var(--anchorColor); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--anchorHoverColor); } fieldset { border: none; margin: 0; } input { appearance: none; border: none; font: inherit; margin: 0; outline: none; padding: 0; } input[type="submit"] { cursor: pointer; } .form input[type="email"], .form input[type="password"] { inline-size: 100%; } :root { --loginBorderRadius: 0.25em; --loginHeaderBackgroundColor: #282830; --loginInputBorderRadius: 0.25em; } .login__header { background-color: var(--loginHeaderBackgroundColor); border-top-left-radius: var(--loginBorderRadius); border-top-right-radius: var(--loginBorderRadius); color: #fff; padding: 1.5em; text-align: center; text-transform: uppercase; } .login__title { font-size: 1rem; margin: 0; } .login__body { background-color: #fff; padding: 1.5em; position: relative; } .login__body::before { background-color: #fff; content: ""; height: 0.5em; left: 50%; margin-left: -0.25em; margin-top: -0.25em; position: absolute; top: 0; transform: rotate(45deg); width: 0.5em; } .login input[type="email"], .login input[type="password"] { border: 0.0625em solid #e5e5e5; padding: 1em 1.25em; } .login input[type="email"] { border-top-left-radius: var(--loginInputBorderRadius); border-top-right-radius: var(--loginInputBorderRadius); } .login input[type="password"] { border-bottom-left-radius: var(--loginInputBorderRadius); border-bottom-right-radius: var(--loginInputBorderRadius); border-top: 0; } .login input[type="submit"] { background-color: #1dabb8; border-radius: var(--loginInputBorderRadius); color: #fff; font-weight: 700; order: 1; padding: 0.75em 1.25em; transition: background-color 0.3s; } .login input[type="submit"]:focus, .login input[type="submit"]:hover { background-color: #198d98; } .login__footer { align-items: center; background-color: #fff; border-bottom-left-radius: var(--loginBorderRadius); border-bottom-right-radius: var(--loginBorderRadius); display: flex; justify-content: space-between; padding-bottom: 1.5em; padding-left: 1.5em; padding-right: 1.5em; } .login__footer p { margin: 0; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */