WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Register/Login Form
7516
berox
Open In Editor
Video
Publish Your Code
0
Recommended
14 December 2025
CSS Animated Login Form Design
12 July 2025
form githup gmail
12 August 2025
HTML Login Form with Matrix Background
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'); }); });