<body>
  <div id="reset"><i class="fa fa-refresh"></i></div>
  <div id="greeting">Have we met?</div>
  <div id="buttonCont">
    <div id="buttons">
      <div class="button" id="buttonLeft">
        <span>Yes</span>
        <div class="inputCont">
          <input type="text" placeholder="Username"></input>
          <input type="password" placeholder="Password"></input>
          <div id="loginButtons">
            <div class="loginButton">Login</div>  
          </div>
        </div>
      </div>
      <div class="button" id="buttonRight">
        <span>No</span>
        <div class="inputCont">
          <input type="text" placeholder="Username"></input>
          <input type="text" placeholder="Email Address"></input>
          <input type="password" placeholder="Password"></input>
          <input type="password" placeholder="Confirm Password"></input>
          <div id="loginButtons">
            <div class="loginButton">Sign Up!</div>  
          </div>
        </div>
      </div>
      <div class="button" id="buttonMaybe">
        <span>I'm not sure.</span>
        <div class="inputCont">
          <input type="text" placeholder="Email Address"></input>
          <div id="loginButtons">
            <div class="loginButton">Send My Info</div>  
          </div>
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
  </div>
</body>
* {
  box-sizing: border-box;
}

body {
  background: #2F2047;
  color: white;
  font-family: Helvetica;
  position: relative;
}

a {
  color: inherit;
}

#reset {
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 30px;
}

#greeting {
  font-size: 50px;
  text-align: center;
  padding-top: 10%;
  margin-bottom: 40px;
}

#buttonCont {
  width: 100%;
}

#buttons {
  width: 40%;
  text-align: center;
  margin: auto;
  position: relative;
}

.button {
  width: 45%;
  height: 75px;
  display: inline-block;
  padding: 20px 0px;
  border: 2px solid white;
  border-radius: 5px;
  text-align: center;
  margin: 1.25%;
  font-size: 24px;
  transition: all 0.35s ease-out;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  top: 0;
  background: #2F2047;
}

#buttonLeft {
  float: left;
  left: 0;
}

#buttonRight {
  float: right;
  right: 0;
}

#buttonMaybe {
  width: 97.5%;
  top: 95px;
  left: 0px;
  position: absolute;
}

#maybe {
  text-align: center;
  margin-top: 20px;
}

.inputCont {
  width: 100%;
}

input {
  padding: 10px 10px;
  font-size: 18px;
  margin: 20px 0px;
  width: 90%;
  display: none;
  opacity: 0;
  position: relative;
  top: 20px;
  transition: all 1s ease-out;
  background: none;
  border: 2px solid white;
  border-radius: 5px;
  color: white;
}

input:focus {
  outline: none;
}

.inputShow {
  animation: inputShow 0.6s ease-out;
  animation-fill-mode: forwards;
}

@keyframes inputShow {
  0% {display: none; top: 30px; opacity: 0;}
  1% {display: block; top: 30px; opacity: 0;}
  100% {display: block; top: 0px; opacity: 1;}
}

.showFields1 {
  animation: show1 1.2s ease-out;
  animation-fill-mode: forwards;
}

.showFields2 {
  animation: show2 1.2s ease-out;
  animation-fill-mode: forwards;
}

@keyframes show1 {
  0% {width: 45%; height: 75px;}
  50% {width: 100%; height: 75px;}
  100% {width: 100%; height: 320px;}
}

@keyframes show2 {
  0% {width: 45%; height: 75px;}
  50% {width: 100%; height: 75px;}
  100% {width: 100%; height: 500px;}
}

.loginButton {
  width: 90%;
  padding: 20px 0px;
  text-align:center;
  border: 2px solid white;
  border-radius: 5px;
  display: none;
  opacity: 0;
  position: relative;
  top: 30px;
  margin: auto;
  margin-top: 20px;
}

.loginButton:hover {
  background: white;
  color: #2F2047;
}

.notSureButton {
  width: 0%;
  padding: 0px;
}

.notSureAnimation {
  animation: notSure 2s ease-out;
  animation-fill-mode: forwards;
}

@keyframes notSure {
  0% {width: 97.5%; left: 0%; top: 95px; height: 75px;}
  25% {width: 4%; left: 46.75%; top: 95px; height: 75px;}
  50% {width: 4%; left: 46.75%; top: 0px; height: 75px;}
  75% {width: 97.5%; left: 0%; top: 0px; height: 75px;}
  100% {width: 97.5%; left: 0%; top: 0px; height: 240px;}
}

@media(max-width: 1042px) {
  #buttons {
    min-width: 300px;
    width: 60%;
  }
}
$(document).ready(function() {
  var orig = $("body").html();

  $(document).on('click', '#reset', function() {
    console.log(orig);
    $("body").empty().append(orig);
  });

  $(document).on('click', '.button:not(#buttonMaybe)', function() {
    $this = $(this);
    $this.siblings().fadeOut(200);
    $("#maybe").fadeOut(200);
    setTimeout(function() {
      $this.find("span").fadeOut(200);
    }, 200);
    setTimeout(function() {
      if ($this.attr("Id") == "buttonLeft") {
        $this.addClass("showFields1");
      } else {
        $this.addClass("showFields2");
      }
    }, 400);
    setTimeout(function() {
      $this.find("input, .loginButton").each(function() {
        $(this).show().addClass("inputShow");
      });
    }, 1600);
  });

  $(document).on('click', "#buttonMaybe", function() {
    $this = $(this);
    $this.find("span").fadeOut(200);
    setTimeout(function() {
      $this.addClass("notSureAnimation");
    }, 200);
    setTimeout(function() {
      $("#buttonLeft, #buttonRight").find("span").fadeOut(200);
    }, 1000);
    setTimeout(function() {
      $("#buttonLeft, #buttonRight").addClass("notSureButton").find("span").fadeOut(200);
    }, 1250);
    setTimeout(function() {
      $this.find("input, .loginButton").each(function() {
        $(this).show().addClass("inputShow");
      });
    }, 2200);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js