Design Sliding Sign-up & Sign-in Form using HTML, CSS & JavaScript

This article shows us about how we can design a sliding sign-up and sign-in form using HTML, CSS and JavaScript. 

HTML

<div class="form">
  <div class="back">
    <div>
      <h2>Don't have an account?</h2>
      <p>Sign up to save all your collections</p>
      <button id="show-signup-form">
        Sign up
      </button>
    </div>
    <div>
      <h2>Have an account?</h2>
      <p>Sign in to see all your collections</p>
      <button id="show-signin-form">
        Sign in
      </button>
    </div>
  </div>
  <div class="front">
    <div class="signin">
      <div class="title">
        Sign In
      </div>
      <div class="form-element">
        <i class="fa fa-envelope"></i>
        <input type="text" placeholder="Email">
      </div>
      <div class="form-element">
        <i class="fa fa-key"></i>
        <input type="password" placeholder="Password">
      </div>
      <div class="form-element">
        <button>Sign In</button>
      </div>
      <div class="form-element">
        <a href="#">Forgot password?</a>
      </div>
    </div>
    <div class="signup">
      <div class="title">
        Sign Up
      </div>
      <div class="form-element">
        <i class="fa fa-user"></i>
        <input type="text" placeholder="Fullname">
      </div>
      <div class="form-element">
        <i class="fa fa-envelope"></i>
        <input type="text" placeholder="Email">
      </div>
      <div class="form-element">
        <i class="fa fa-key"></i>
        <input type="password" placeholder="Password">
      </div>
      <div class="form-element">
        <button>Sign Up</button>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background:#ccc;
  font-family:"Raleway";
}
.form {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:600px;
  height:350px;
}
.form .back {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:300px;
  background:#555;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.form .back > div {
  padding:30px;
  flex:1;
}
.form .back > div h2 {
  color:#f5f5f5;
}
.form .back > div p {
  color:#ccc;
}
.form .back > div button {
  padding:5px 10px;
  border:2px solid #f5f5f5;
  font-size:15px;
  font-weight:600;
  background:#555;
  color:#f5f5f5;
  border-radius:5px;
  cursor:pointer;
}
.form .front {
  position:relative;
  left:50%;
  width:50%;
  height:100%;
  background:#f5f5f5;
  transition:all 500ms ease-in-out;
}
.form .front .signup {
  display:none;
}
.form .front > div {
  padding:50px 20px;
  text-align:center;
}
.form .front .title {
  font-size:30px;
  font-weight:600;
  color:#555;
  margin-bottom:20px;
}
.form .front .form-element {
  position:relative;
  margin:15px 0px;
}
.form .front .form-element input {
  width:100%;
  padding:10px;
  font-size:16px;
  background:#ddd;
  border-radius:30px;
  border:none;
  outline:none;
  box-sizing:border-box;
  text-indent:35px;
}
.form .front .form-element i.fa {
  position:absolute;
  top:10px;
  left:15px;
  color:#555;
}
.form .front .form-element button {
  width:100%;
  padding:10px 0px;
  border-radius:30px;
  background:#00acee;
  color:#f5f5f5;
  border:none;
  outline:none;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.form .front .form-element a {
  text-decoration:none;
  color:#555;
  font-size:15px;
  font-weight:600;
} 
.form.active .front {
  left:0%;
}
.form.active .front .signup {
  display:block;
}
.form.active .front .signin {
  display:none;
}

JS

document.getElementById("show-signup-form").addEventListener("click",function(){
  document.getElementsByClassName("form")[0].classList.add("active");
});
document.getElementById("show-signin-form").addEventListener("click",function(){
  document.getElementsByClassName("form")[0].classList.remove("active");
});