Choose Login / Register

jQuery

by Megi93

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="account">
  <div class="container accountWrapper">
    <div class="row">
      <div class="col-sm-6">
        <div class="boxUser boxSign">
          <p>Already A User?</p>
          <div class="singIn">
            <button class="btn btn-lg btnAccount">Sign In</button>
          </div>
        </div>
        <div id="login" class="overlay">
          <form>
            <h3>Login</h3>
            <div class="mail">
              <label>Username or Email</label>
              <input type="text" name="mail">
            </div>
            <div class="pass">
              <label>Password</label>
              <input type="password" name="password">
            </div>
            <button type="submit" class="btn btnLogin">Login</button>
          </form>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="boxUser boxAccount">
          <p>You don't have an account?</p>
          <div class="singIn">
            <button class="btn btn-lg btnAccount">Register</button>
          </div>
        </div>
        <div id="register" class="overlay">
          <form>
            <h3>Register</h3>
            <div class="name">
              <label>Fullname</label>
              <input type="text" name="fullname">
            </div>
            <div class="user">
              <label>Username</label>
              <input type="text" name="username">
            </div>
            <div class="mail">
              <label>Email</label>
              <input type="text" name="mail">
            </div>
            <div class="pass">
              <label>Password</label>
              <input type="password" name="password">
            </div>
            <button...

CSS

section#account {
  background: indianred;
  padding: 50px;
}

.accountWrapper {
  margin: 100px auto;
  background: rgba(255, 255, 255, .5);
  min-height: 400px;
  display: table;
  position: relative;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}

.boxUser {
  text-align: center;
  margin: 61px 0;
  padding: 100px;
}

.boxUser>p {
  font-size: 1.5em;
  color: white;
}

.btnAccount {
  background-color: transparent;
  color: white;
  border: 3px solid #fff;
  padding: 10px 30px;
  border-radius: 50px;
}

button.btn.btn-lg.btnAccount:focus,
button.btn.btn-lg.btnAccount:hover {
  outline: none;
  color: white;
}

.selected {
  background: white;
  margin: -30px 25px;
  padding: 235px 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
  transition: all .5s;
}

.boxUser.selected>p,
.selected .btnAccount,
.selected button.btn.btn-lg.btnAccount:focus,
.selected button.btn.btn-lg.btnAccount:hover {
  outline: none;
  color: white;
  color: #222;
}

.selected .btnAccount {
  border: 3px solid #222;
}

.overlay {
  display: none;
  width: 85%;
}

.activeOverlay {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.overlay .mail,
.overlay .pass,
.overlay .name,
.overlay .user {
  position: relative;
}

.activeOverlay label {
  position: absolute;
  top: -12px;
  left: 12%;
  background: white;
  font-size: 11px;
  padding: 5px;
  z-index: 1;
}

.overlay input {
  position: relative;
  width: 80%;
  height: 35px;
  margin-bottom: 20px;
  padding-left: 5px;
}

.overlay .btn {
  background-color: indianred;
  color: white;
  padding: 10px 30px;
  border-radius: 50px;
  transition: all .25s;
}

JavaScript

$('.btnAccount').on('click', function() {
  $('.overlay').removeClass('activeOverlay')
  $('.boxUser').children().css('display', 'block')

  if ($('.boxUser').hasClass('selected')) {
    $('.boxUser').removeClass('selected');
  }

  $(this).closest('.boxUser').addClass('selected');
  $(this).closest('.boxUser').next().addClass('activeOverlay');
  $(this).closest('.boxUser').children().css('display', 'none');

});