<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');
  });
  
});