Just a basic elegant and fancy login form ^.^
Forked from Victor Hugo Matias's Pen Elegant Login Form.
A Pen by Joseph Daniel on CodePen.
Just a basic elegant and fancy login form ^.^
Forked from Victor Hugo Matias's Pen Elegant Login Form.
A Pen by Joseph Daniel on CodePen.
<form class="login"> | |
<fieldset> | |
<legend class="legend">Login</legend> | |
<div class="input"> | |
<input type="email" placeholder="Email" required /> | |
<span><i class="fa fa-envelope-o"></i></span> | |
</div> | |
<div class="input"> | |
<input type="password" placeholder="Password" required /> | |
<span><i class="fa fa-lock"></i></span> | |
</div> | |
<button type="submit" class="submit"><i class="fa fa-long-arrow-right"></i></button> | |
</fieldset> | |
<div class="feedback"> | |
login successful <br /> | |
redirecting... | |
</div> | |
</form> |
$( ".input" ).focusin(function() { | |
$( this ).find( "span" ).animate({"opacity":"0"}, 200); | |
}); | |
$( ".input" ).focusout(function() { | |
$( this ).find( "span" ).animate({"opacity":"1"}, 300); | |
}); | |
$(".login").submit(function(){ | |
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"}); | |
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"}); | |
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400); | |
$("input").css({"border-color":"#2ecc71"}); | |
return false; | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
// Set background image (pattern) | |
*{ | |
-ms-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
border: 0; | |
} | |
html, body{ | |
width: 100%; | |
height: 100%; | |
background: url(https://i.imgur.com/JncHCNB.png) repeat fixed; | |
font-family: 'Open Sans', sans-serif; | |
font-weight: 200; | |
} | |
// Start styles in form | |
.login{ | |
position: relative; | |
top: 50%; | |
width: 250px; | |
display: table; | |
margin: -150px auto 0 auto; | |
background: #fff; | |
border-radius: 4px; | |
} | |
.legend{ | |
position: relative; | |
width: 100%; | |
display: block; | |
background: #474842; | |
padding: 15px; | |
color: #fff; | |
font-size: 20px; | |
&:after{ | |
content: ""; | |
background-image: url(https://i.imgur.com/dsyLjOB.png); | |
background-repeat: no-repeat; | |
background-position: 152px -13px; | |
opacity: 0.06; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
position: absolute; | |
} | |
} | |
.input{ | |
position: relative; | |
width: 90%; | |
margin: 15px auto; | |
span{ | |
position: absolute; | |
display: block; | |
color: darken(#EDEDED, 10%); | |
left: 10px; | |
top: 8px; | |
font-size: 20px; | |
} | |
input{ | |
width: 100%; | |
padding: 10px 5px 10px 40px; | |
display: block; | |
border: 1px solid #EDEDED; | |
border-radius: 4px; | |
transition: 0.2s ease-out; | |
color: darken(#EDEDED, 30%); | |
&:focus{ | |
padding: 10px 5px 10px 10px; | |
outline: 0; | |
border-color: #474842; | |
} | |
} | |
} | |
.submit{ | |
width: 45px; | |
height: 45px; | |
display: block; | |
margin: 0 auto -15px auto; | |
background: #fff; | |
border-radius: 100%; | |
border: 1px solid #474842; | |
color: #474842; | |
font-size: 24px; | |
cursor: pointer; | |
box-shadow: 0px 0px 0px 7px #fff; | |
transition: 0.2s ease-out; | |
&:hover, &:focus{ | |
background: #474842; | |
color: #fff; | |
outline: 0; | |
} | |
} | |
.feedback{ | |
position: absolute; | |
bottom: -70px; | |
width: 100%; | |
text-align: center; | |
color: #fff; | |
background: #2ecc71; | |
padding: 10px 0; | |
font-size: 12px; | |
display: none; | |
opacity: 0; | |
&:before{ | |
bottom: 100%; | |
left: 50%; | |
border: solid transparent; | |
content: ""; | |
height: 0; | |
width: 0; | |
position: absolute; | |
pointer-events: none; | |
border-color: rgba(46, 204, 113, 0); | |
border-bottom-color: #2ecc71; | |
border-width: 10px; | |
margin-left: -10px; | |
} | |
} |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> |