WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulaire d'inscription/connexion
7081
berox
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
28 February 2025
formulaire d'inscription/connexion animation
30 May 2023
Formulaire de connexion/inscription CSS
23 May 2024
formulaire d'inscription simple et descendant
HTML
Copy
Webleb
Sign Up
Login
By signing up, you agree to our
Terms of service
Remember me
Forget your password?
CSS
Copy
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300); * { margin: 0; padding: 0; } body { color: #666; background: #0f0c29; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font: 16px/26px "Raleway", sans-serif; } a { color: #666; text-decoration: none; } a:hover { color: #313151; } input { font: 16px/26px "Raleway", sans-serif; } .form-wrap { background-color: #fff; width: 400px; height: 400px; margin: 3em auto; border-radius: 7px; } .form-wrap .tabs { overflow: hidden; } .form-wrap .tabs h3 { float: left; width: 50%; } .form-wrap .tabs h3 a { padding: 0.5em 0; text-align: center; font-weight: 400; background-color: #e6e7e8; display: block; color: #666; } .form-wrap .tabs h3 a.active { background-color: #fff; } .form-wrap .tabs-content { padding: 1.5em; } .form-wrap .tabs-content div[id$="tab-content"] { display: none; } .form-wrap .tabs-content .active { display: block !important; } .form-wrap form .input { box-sizing: border-box; -moz-box-sizing: border-box; color: inherit; font-family: inherit; padding: 0.8em 0 10px 0.8em; border: 1px solid #cfcfcf; outline: 0; display: inline-block; margin: 0 0 0.8em 0; padding-right: 2em; width: 100%; border-radius: 7px; } .form-wrap form .button { width: 100%; padding: 0.8em 0 10px 0.8em; background-color: #24243e; border: none; color: #fff; cursor: pointer; text-transform: uppercase; border-radius: 7px; } .form-wrap form .button:hover { background-color: #313151; } .form-wrap .help { margin-top: 0.6em; } .form-wrap .help p { text-align: center; font-size: 14px; }
JS
Copy
jQuery(document).ready(function($) { tab = $('.tabs h3 a'); tab.on('click', function(event) { event.preventDefault(); tab.removeClass('active'); $(this).addClass('active'); tab_content = $(this).attr('href'); $('div[id$="tab-content"]').removeClass('active'); $(tab_content).addClass('active'); }); });