LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


	
CSS
.content {
	width: 320px;
	height: 100px;
	position: relative;
	margin: auto;
	background-color: #D8D8D5;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	transition: all .2s ease;
}

.nav-bar {
	width: 100%;
	height: 5px;
	background-color: #056Cf2;

}
.login-form {
	margin: auto;
	height: auto;
	font-weight: 600;
	line-height: 2.5em;
	padding: 1em 2em;
	text-align: left;
	color: #202020;
	-webkit-transform: rotateX(0deg);
	visibility: visible;
	opacity: 1;
	display: block;
}

.content.login-yes {
	height: 260px;
}

.content.signup-yes {
	height: 580px;
}

.login-form label {
	color: #53575C;
}

.form-login {
	transition: all 1s ease;
}

.form-signup {
	transition: all 1s ease;
}

::-webkit-validation-bubble-message {
	display: none;
}

.login-form input {

	width: 12em;
	line-height: 1.75em;
	font-size: 1.2em;
	outline: none;
	border-radius: 10px;
	padding: .2em .5em;
	box-shadow: 0;
	border: none;
}

.login-form input:focus {
	border: 1px solid #202020;
}

.login-form .checkbox {
	border: 0;
	width: .8em;
}

.login-form .valid {
	border: 1px solid #378A02;
	color: #378A02;
}

.login-form .invalid {
	border: 2px solid #ED2415;
	color: #ED2415;
}

.login-form .required:focus {
	border: 1px solid #056CF2;
}

.hidden {

	-webkit-transform: rotateX(90deg);
	-webkit-transform-origin: top;
	height: 0;
	visibility: none;
	opacity: 0;
}

.visible {
	-webkit-transform: rotateX(0deg);
	visibility: visible;
	height: auto;
	opacity: 1;
	display: block;
}

.login-form button {
	width: 120px;
	height: 50px;
	border: none;
	border-radius: 15px;
	color: #fff;
	font-weight: 600;
	position: relative;
	margin-top: 30px;
	margin-right: 10px;
	transition: all .5s ease;
}

.login-form .signup-login {

	width: 100%;
	height: 75px;
	position: relative;
	top: -20px;
}

.login-form .button .signup {

	background-color: #2083EB;
	box-shadow: 0 3px 0px 0px #0554F2;
	float: left;
}

.login-form .button .signup:hover {

	top: 3px;
	background-color: #1861AE;
	box-shadow: none;
}

.login-form .button .login {
	background-color: #8EA106;
	box-shadow: 0 3px 0 0 #3D4503;
	float: right;
	margin-right: 0;
}

.login-form .button .login:hover {

	background-color: #5E6B04;
	top: 3px;
	box-shadow: none;
}
JS
$('input').change(function() {

		$('input[required]:invalid').addClass('invalid');
		$('input[required]:valid').addClass('valid').removeClass('invalid');

	});

	$('.login').bind('click', function() {

		$('.form-login').removeClass('hidden');
		$('.form-login').addClass('visible');
		$('.content').addClass('login-yes')

	})

	$('.signup').bind('click', function() {

		$('.form-login').removeClass('hidden');
		$('.form-signup').removeClass('hidden');
		$('.form-login').addClass('visible');
		$('.form-signup').addClass('visible');
		$('.content').addClass('signup-yes');
	})
Host Instantly Drag and Drop Website Builder

 

Description

Simple Login Form style that i've been working on, in progress
Term
Wed, 11/29/2017 - 11:21

Related Codes

Pen ID
Pen ID
Pen ID