<div id="form_container">
<form id="login">
<input type="text" placeholder="Name"/>
<input type="password" placeholder="Password"/>
<input type="button" value="Sign In">
</form>
<form id="forgot">
<input type="text" placeholder="Name"/>
<input type="email" placeholder="E-mail"/>
<input type="button" value="Recover Password">
</form>
</div>
<div id="link_container">
<a href="#" id="forgot">Forgot your <strong>Password?</strong><span class="icn">➥</span></a>
<a href="#" id="back">Back to login<span class="icn">➥</span></a>
</div>
*{
box-sizing:border-box;
font-size:13px;
}
body {
background:#484b5b;
}
div#form_container {
width:295px;
height:200px;
padding-top:10px;
margin:50px auto 10px;
overflow:hidden;
position:relative;
}
div#form_container:before{
content:"";
width:8px;
height:8px;
top:6px;
left:50%;
border-top:1px solid #5c5f70;
border-left:1px solid #5c5f70;
position:absolute;
transform: rotate(45deg);
background:#282832;
z-index:1;
}
form {
position:absolute;
left:0;
width:290px;
height:185px;
padding:25px;
border-top:1px solid #5c5f70;
border-bottom:3px solid #1e1d25;
border-radius:5px;
transition:all 0.3s ease-out;
box-shadow:1px 1px 3px #333;
}
form#login {
top:10px;
background: repeating-linear-gradient(110deg, #282832, #282832 15px, #25252f 15px, #25252f 30px);
}
form#forgot{
bottom:-195px;
background: repeating-linear-gradient(110deg, #32323F, #32323F 15px, #282832 15px, #282832 30px);
}
input[type="text"],input[type="password"],input[type="email"] {
width:240px;
height:38px;
margin-bottom:3px;
border:1px solid #2e2e38;
background:white;
color:#9d9da5;
box-shadow:inset 0px 0px 10px #ccc;
border-radius:5px;
padding:15px;
outline:none;
}
input[type="button"] {
background: rgb(130,188,199);
background: -moz-linear-gradient(top, rgba(130,188,199,1) 0%, rgba(79,158,173,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,188,199,1)), color-stop(100%,rgba(79,158,173,1)));
background: -webkit-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);
background: -o-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);
background: -ms-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);
background: linear-gradient(to bottom, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%);
margin-top:6px;
color:white;
text-shadow:0 -1px 1px #5794a9;
width:240px;
height:40px;
border-radius:5px;
padding:10px 0 15px;
border:1px solid #2e2e38;
cursor:pointer;
}
input[type="button"]:active {
background: rgb(79,158,173);
background: -moz-linear-gradient(top, rgba(79,158,173,1) 0%, rgba(130,188,199,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,158,173,1)), color-stop(100%,rgba(130,188,199,1)));
background: -webkit-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);
background: -o-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);
background: -ms-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);
background: linear-gradient(to bottom, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%);
text-shadow:0 1px 1px #5794a9;
color:#eeeeee;
}
div#link_container {
width:170px;
margin:0 auto;
text-align:center;
}
div#link_container a {
color:#acaebb;
font-family:helvetica,arial,sans-serif;
font-size:14px;
text-decoration:none;
font-weight:100;
text-shadow:1px -1px 1px #2a2a32;
}
div#link_container a strong {
font-weight:400;
}
div#link_container a span.icn {
display:inline-block;
margin-left:5px;
transform:rotate(-90deg);
}
div#link_container a#back {
display:none;
}
//Design based on Shaun Moynihan dribble http://dribbble.com/shots/496804-Sign-In
$(document).on('click','a#forgot',function(e){
e.preventDefault();
$('form#forgot').css('bottom','5px');
$(this).fadeOut('fast',function(){
$('a#back').fadeIn('fast');
});
});
$('div#link_container').on('click','a#back',function(e){
e.preventDefault();
$('form#forgot').css('bottom','-195px');
$(this).fadeOut('fast',function(){
$('a#forgot').fadeIn('fast');
});
});
This Pen doesn't use any external CSS resources.