form.grop-from#signup
  .form-head
    span.text 
    i.icon-placeholder
  .form-body
    span.error-text Please Fill Out This Field
    .form-controls
      input#control-name(placeholder="Name")
      input#control-phone(placeholder="Phone No")
      input#control-email(placeholder="Email")
      input#control-password(placeholder="Password" , type="password")
      input#control-password-repeat(placeholder="Confirm Password" , type="password")
  a.form-action
    i.icon-action
View Compiled
@import "compass";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
*, *:after, *:before{
  @include box-sizing(border-box);
}

$balance : #F50057;

body{
  background: #eee;
  font-family: 'Open Sans', sans-serif;
}

.grop-from{
  width: 360px;
  height: 70px;
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  @include translate(-50% , -50%);
  @include border-radius(50px);
  
  
  .form-body{
      height: 70px;
      overflow: hidden;
      @include border-radius(50px);
    
     .error-text{
        position: absolute;
        left: 80px;
        top: 4px;
        z-index: 25;
       color: #b71c1c;
       font-size: 10px;
       font-weight: 600;
       display: none;
      }
      
    .form-controls{
      position: relative;
      z-index: 5;
      @include transition(.2s ease-in);
      top: 0;
      
        input{
          display: block;
          width: 100%;
          height: 70px;
          padding: 10px 60px 10px 80px ;
          font-size: 18px;
          color: #666;
          border:none;
          &:focus{
            outline: none;
          }
        }
    }    
  }

  
  .form-head{
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 100%;
    background: $balance;
    @include border-radius(50px);
    text-align: center;
    line-height: 70px;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    z-index: 40;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    @include transition(.2s ease-in);
    .text{
        display: none;
        &:before{
          font-family: 'Open Sans', sans-serif;
        }
      }
  }
  
  .form-action{
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fefefe;
    text-align: center;
    right: 10px;
    top: 50%;
    @include border-radius(50px);
    @include translateY(-50%);
    z-index: 50;
    cursor: pointer;
    @include transition(.3s);
    border:none;
    outline: none;
    color:inherit;
    &:hover{
      background: #f9f9f9;
    }
      .icon-action{
        @extend .material-icons;
        @include transition(.2s ease-in);
        &:after{
            line-height: 50px;
          content: 'arrow_forward';
        }
        &.back{
          @include rotate(180deg);
        }
    }
  }
  
  .icon-placeholder{
    font-size: 40px;
    line-height: 70px;
  }
  
  &#signup{
    color: #fff;
    .form-head{
      width: 100%;
      .icon-placeholder{display: none;}
      .text{
        display: block;
        &:before{
          content: 'Sign Up';
        }
      }
      
    }
    
    .form-action{
      right: 100px;
      background: none;
      line-height: 65px;
      .icon-action{
         &.back{
          @include rotate(0);
        }
      }
    }
    
  }  
  &#success{
    color: #fff;
    .form-head{
      width: 100%;
      background: #00E676;
      .icon-placeholder{display: none;}
      .text{
        display: block;
        &:before{
          content: 'Success';
        }
      }
    }
    
    .form-action{
      right: 90px;
      background: none;
      line-height: 65px;
      .icon-action{
         &.back{
          @include rotate(0);
        }
        &:after{
          content: 'mood';
        }
      }
    }
    
  }
  
  &#name{
    color:  #9C27B0;;
    .form-head{
      background: #9C27B0;
      
      .icon-placeholder:after{
        content: 'face';
      }
    }
  }
  
  &#phone{
    color: #009688;
        .form-head{
          background: #009688;
          .icon-placeholder:after{
            content: 'phone';
          }
      }
      .form-body .form-controls{
            top: -70px;
      }
  }
  &#email{
    color: #039BE5;
        .form-head{
          background: #039BE5;
          .icon-placeholder:after{
            content: 'mail_outline';
          }
      }
      .form-body .form-controls{
            top: -140px;
      }
  }
  &#password{
    color: #37474F;
        .form-head{
          background: #37474F;
          .icon-placeholder:after{
            content: 'lock_outline';
          }
      }
      .form-body .form-controls{
            top: -210px;
      }
  } 
&#password-repeat{
    color: #212121;
        .form-head{
          background: #212121;
          .icon-placeholder:after{
            content: 'lock';
          }
      }
      .form-body .form-controls{
            top: -280px;
      }
  }
  
  &.error{
        .form-head{
          background: #b71c1c !important;
          .icon-placeholder:after{
            content: 'close' !important;
          }
      }
    .form-body .form-controls input{
      @include input-placeholder {
        color: #b71c1c;
      }
    }
  }
  
}


.material-icons , .icon-placeholder{
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

View Compiled
$('.form-head').click(function(){
  
    if($(this).closest('.grop-from').attr('id')=='signup'){
        $('.grop-from').attr('id' , 'name');
        $('.icon-action').addClass('back');
    }  
    else if($(this).closest('.grop-from').attr('id')=='success'){
          $('.grop-from').attr('id' , 'signup');
          $('input').val('');
    }
    
});





$('.form-action').click(function(){
 
    var form_id = $('.grop-from').attr('id');
      $('.icon-action').addClass('back');
  
    if($('#control-' + form_id).val() != ''){
      switch (form_id) {
          case 'name':
              form_id = "phone";
              break;
          case "phone":
              form_id = "email";
              break;
          case "email":
              form_id = "password";
              break;
          case "password":
              form_id = "password-repeat";
              break;
          case "password-repeat":
              form_id = "success";
              break;   
        case "success":
              form_id = "signup";
              break; 
      }
       $('.icon-action').addClass('back');
      
  }
  
  else{
    
     switch (form_id) {
          case 'name':
              form_id = "signup";
              $('.icon-action').removeClass('back');
              break;
          case "phone":
              form_id = "name";
              break;
          case "email":
              form_id = "phone";
              break;
          case "password":
              form_id = "email";
              break;
          case "password-repeat":
              form_id = "password";
              break; 
         case "success":
              form_id = "signup";
              break; 
      }
     $('.icon-action').removeClass('back');
  }
 
  $('.grop-from').attr('id' , form_id);
  
});

$('input').keyup(function(){
   $('.grop-from').removeClass('error');
    $('.error-text').fadeOut();
    
    if($(this).val()!=''){
      $('.icon-action').removeClass('back');
    }
  else{
    $('.icon-action').addClass('back');
  }
  
  
})
Run Pen

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js