LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

test

CSS
*{box-sizing: border-box; margin: 0; padding: 0;}
body{
	background: #1CD8D2;
	background: -webkit-linear-gradient(to left, #1CD8D2 , #93EDC7);
	background: linear-gradient(to left, #1CD8D2 , #93EDC7);
}
.card{
	width: 350px;
	height: 380px;
	margin: 60px auto;
	box-shadow: 0px 3px 15px rgba(0,0,0,.3);
	border-radius: 10px;
	position: relative;
	background-color: #fbfbfb;
}
.overlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 43px 40px;
	overflow: hidden;
}
.title{
	pointer-events: none;
	position: relative;
	font-size: 30px;
	font-family: sans-serif;
	border-left: 6px solid #e44b48;
	margin-left: -40px;
	padding-left: 34px;
	color: #e44b48;
	z-index: 50;
	transition: all .2s ease-in;
}
.overlay.clicked .title{
	color: #fbfbfb;
	border-left: 6px solid #fbfbfb;
}


.field{
	background-color: #eee;
	position: relative;
	width: 100%;
	height: 40px;
	margin-top: 40px;
	transition: all .2s ease-in;
}
.overlay.clicked .field{
	background-color: #fbfbfb;
}
.login-btn{
	position: relative;
	margin: 40px auto;
	width: 60%;
	height: 50px;
	border: 3px solid #eee;
	transition: all .2s ease-in;
}
.overlay.clicked .login-btn{
	border: 3px solid #fbfbfb;
}

.register-btn{
	width: 60px;
	height: 60px;
	background-color: #e44b48;
	border-radius: 100%;
	position: absolute;
	right: -30px;
	top: 30px;
	box-shadow: 0px 3px 8px rgba(0,0,0,.2);
	cursor: pointer;
	transform-origin: 0px 0px;
	transform: rotate(45deg) translate(0px,-30px);
	transition: all .1s ease-in;
}
.register-btn:before,
.register-btn:after{
	content: "";
	display: block;
	width: 20px;
	border-top: 3px solid #fbfbfb;
	position: absolute;
	top: 28px;
	left: 21px;
}
.register-btn:before{
	transform: rotate(45deg);
}
.register-btn:after{
	transform: rotate(135deg);
}

.register-btn.clicked{
	transform: rotate(90deg) translate(0px,-20px);
	box-shadow: 0px 3px 8px rgba(0,0,0,0);
}
.overlay .fader{
	width: 60px;
	height: 60px;
	border-radius: 100%;
	position: absolute;
	top: 30px;
	right: 10px;
	background-color: #e44b48;
	visibility: hidden;
	-webkit-transition: all .2s ease-out;
	        transition: all .2s ease-out;
	-webkit-transition-delay: .1s;
		   transition-delay: .1s;
}
.overlay.clicked .fader{
	top: -90px;
	right: -90px;
	width: 600px;
	height: 600px;
	visibility: visible;
}
JS
$('.register-btn').on('click', function(){
	$(this).toggleClass('clicked');
	$('.overlay').toggleClass('clicked');
});
Host Instantly Drag and Drop Website Builder

 

Description

I saw a sample UI design by Boris Borisov, this is my attempt at that effect.
Term
Wed, 11/29/2017 - 11:26

Related Codes

Pen ID
Pen ID
Pen ID