Sliding Login/Register Form

index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> 
<div class="wrap">
  <form class="login">
    <div class="toggle-bar">
      <div class="toggle-login active">
        <span>Login</span>
      </div>
      <div class="toggle-register">
        <span>Register</span>
      </div>
    </div>
    <div class="login-body">
      <div class="input-section">
        <i class="fas fa-user"></i>
        <input class="user-input" type="text" placeholder="Username">
      </div>
      <div class="input-section">
        <i class="fas fa-lock"></i>
        <input class="user-input" type="password" placeholder="Password">
      </div>
      <p id="forgot-password">Forgot your password?</p>
      <button class="btn" id="btn-login">Login</button>
    </div>
    <div class="register-body" style="display:none;">
      <div class="input-section">
        <i class="fas fa-user"></i>
        <input class="user-input" type="text" placeholder="Username">
      </div>
      <div class="input-section">
        <i class="fas fa-envelope"></i>
        <input class="user-input" type="email" placeholder="Email">
      </div>
      <div class="input-section">
        <i class="fas fa-lock"></i>
        <input class="user-input" type="password" placeholder="Password">
      </div>
      <p id="registered">Already registered?</p>
      <button class="btn" id="btn-login">Register</button>
    </div>
  </form>  
</div>

script.js

$('.toggle-register').click(function(){
  $(this).addClass('active');
  $('.toggle-login').removeClass('active');
  $('.login-body').slideUp("slow");
  $('.register-body').delay(625).slideDown("slow");
});

$('.toggle-login').click(function(){
  $(this).addClass('active');
  $('.toggle-register').removeClass('active');
  $('.register-body').slideUp("slow");
  $('.login-body').delay(625).slideDown("slow");
});

$('#registered').click(function(){
  $('.toggle-login').click();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

sliding-login-register-form.markdown

Sliding Login/Register Form

Using jQuery, a slide animated login/register form is super simple and effective.

A Pen by Reggie Bowers on CodePen.

License.

style.scss

$primary: #2c3e50;
$width: 100%;
$box-shadow: 0px 2px 5px 1px #7f8c8d;

// EXTEND
%centered {
  justify-content: center;
  align-items: center;
}

// SETUP
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: url('https://asdb.az.gov/wp-content/uploads/2016/05/gradient_11.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

// LOGIN FORM

.wrap {
  width: $width;
  height: 100vh;
  background: rgba(lighten($primary,40%), 0.5);
  display: flex;
  @extend %centered;
}

.login {
  width: 300px;
  background-color: #fff;
  box-shadow: $box-shadow;
}

.toggle-bar {
  width: $width;
  height: 50px;
  display: flex;
  
   & > :first-child {
    border-right: 1px solid $primary/1.2;
  }
  & > :last-child {
    border-left: 1px solid $primary/1.2;
  }
}

.toggle-login, .toggle-register {
  width: $width/2;
  background-color: $primary;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s;
  span {
    color: #fff;
    text-transform: uppercase;
    font: {
      family: 'Lato', sans-serif;
    }
  }
  &:hover {
    background-color: $primary * 1.5;
  }
}

.active {
  background-color: $primary * 1.5;
}

.login-body, .register-body {
  width: $width;
  height: $width;
  display: flex;
  flex-direction: column;
  @extend %centered;
  & p {
    color: #5f5f5f;
    font-size: 0.9em;
    cursor: pointer;
    transition: color 0.2s;
    margin-bottom: 8px;
  }
  & p:hover {
    color: #2f2f2f;
  }
}

.input-section {
  width: $width;
  text-align: center;
  &:first-child {
    margin-top: 20px;
  }
}

input, .btn {
  width: 150px;
  padding: 10px 15px;
  margin-top: 10px;
  &.user-input {
    border: 1px solid #ddd;
  }
}

.btn {
    background-color: $primary;
    color: #fff;
    border: none;
    margin-bottom: 30px;
    transition: background-color 0.2s;
  }

.btn:hover {
  background-color: $primary * 1.5;
  cursor: pointer;
}

i {
  color: $primary;
  margin-right: 5px;
}

.user-input:focus {
  border: 1px solid #aaa;
}

Nice one