<form class="login">
  <div class="form-group">
    <input type="text" class="user" name="user" placeholder="type your user name">
    <input type="password" class="pwd" name="pwd" placeholder="type your password">
  </div>
  <span class="links">
    <a href="#">signup</a>
    <a href="#">forgot password ?</a>
  </span>
  <br/>
  <input type="button" class="btn" value="login">     
</form>

$bgcolor    : #cddc39 ;
$btncolor   : #03a9f4 ;
$formcolor  : #fbfbfb ;
/*---------- the prefixer -------------*/

$prefixes : webkit,moz,ms,o;
@mixin prefix($property,$value){
  @each $prefix in $prefixes{
    #{'-'+$prefix+'-'+$property} : $value;
  }
  #{$property}:$value;
}

body{
  font-family: 'Open Sans', sans-serif;
  background-color:$bgcolor;
  @include prefix(transition,.3s);
}

.login{
  position:relative;
  background:$formcolor;
  display:block;
  width:500px;
  height:70px;
  margin:10% auto;
  overflow:hidden;
  @include prefix(transition,all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55));
  @include prefix(border-radius,4px);
  @include prefix(box-shadow, 1px 1px 8px rgba(0,0,0,.2));
  @include prefix(transform, translateY(-50px));
}
  
.form-group{
  position:relative;
  top:90%;
  left:8%;
  @include prefix(transition,all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55));
  -webkit-transition-delay:1s;
  transition-delay:1s;
}

.user,
.pwd{
    position:absolute;
    display:block;
    width:80%;
    height:60px;
    background:#fff;
    font-size:10pt;
    text-transform:capitalize;
    padding-left:20px;
    color:rgba(0,0,0,.1);
    @include prefix(box-shadow, 1px 1px 20px rgba(0,0,0,.2));
    border:none;
    @include prefix(border-radius,4px);
    @include prefix(transition,all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55));
     &:focus,
     &:active:focus{
      outline:none;
      padding-left:30px;
     }
  }

.user{
  margin-bottom:10%;
  z-index:2;
  @include prefix(transition , .5s);
}

.pwd{
  margin-top:10%;
  z-index:1;
  background:rgba(0,0,0,.1);
   @include prefix(transition , .5s);
}



.links{
  position:absolute;
  top:80%;
  left:10%;
  margin:0 auto;
  @include prefix(transition,all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55));
   -webkit-transition-delay:1.2s;
    transition-delay:1.2s;
  a{
    text-decoration:none;
    display:block;
    float:left;
    width:200px;
    height:40px;
    text-align:left;
    color:#3d5059;
    font-size:10pt;
    font-weight:bolder;
    text-transform:capitalize;
    &:last-child{
      text-align:right;
    }
  }
}

.btn{
   position:absolute;
   bottom:0;
   width:100%;
   height:70px;
   border:none;
   background:$btncolor;
   font-family: 'Open Sans', sans-serif;
   text-align:center;
   font-size:18pt;
   text-transform:capitalize;
   color:#fff;
   z-index:3;
   @include prefix(border-radius,4px);
   @include prefix(transition, .3s);
  &:hover,
  &:focus,
  &:active:focus{ 
    background:#e91e63;
    cursor:pointer;
    outline:none;
    letter-spacing:5px;
  }
}

$(document).ready(function(){

   $('form').find('.btn').on('click',function(){
      $(this).parent().css({
        'height' : '350px',
        'transform' : 'translateY(50px)'
      });
        $(this).siblings('.form-group').css({
          'top':'20%'
        });
        $(this).siblings('.links').css({
          'top':'65%'
        });
      });
    
  
  
  /*-------- focus in ---------*/
  $('.pwd').on('focusin',function(){
    $(this).siblings('.user').css({
      'z-index'   :'1',
      'background':'rgba(0,0,0,.1)',
    });
     $(this).css({
      'z-index' : '2',
      'background' : '#fff',
      });
  });
  
  
   $('.user').on('focusin',function(){
    $(this).siblings('.pwd').css({
      'z-index'   :'1',
      'background':'rgba(0,0,0,.1)'
    });
    $(this).css({
      'z-index' : '2',
      'background' : '#fff'
     });
  });
  
  /*----------- focus out ---------*/
  $('.pwd').on('focusout',function(){
    $(this).siblings('.user').css({
      'z-index'   :'1',
      'background':'rgba(0,0,0,.1)'
    });
    $(this).css({
      'z-index' : '2',
      'background' : '#fff'
    });
  });
  
  
   $('.user').on('focusout',function(){
    $(this).siblings('.pwd').css({
      'z-index'   :'1',
      'background':'rgba(0,0,0,.1)'
    });
    $(this).css({
      'z-index' : '2',
      'background' : '#fff'
     });
  });
})