Login/Sign Up Form ✔ Formulario Registrar/Iniciar sesión

Login & Sign Up Form UI | Formulario de registrar e iniciar sesión UI | formulario CSS

By Sasha

DEMO
HTML

<div class="container">
<div class="message signup">
<div class="btn-wrapper">
<button class="button" id="signup">SignUp</button>
<button class="button" id="login"> Login</button>
</div>
</div>
<div class="form form--signup">
<div class="form--heading">Welcome! Sign Up</div>
<form autocomplete="off">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button class="button">Sign Up</button>
</form>
</div>
<div class="form form--login">
<div class="form--heading">Welcome back! </div>
<form autocomplete="off">
<input type="text" placeholder="Name">
<input type="password" placeholder="Password">
<button class="button">Login</button>
</form>
</div>
</div>

CSS

.form,.message,body,form{display:flex;justify-content:center;align-items:center;flex-direction:column}
body{height:100vh;background:#E8E8E8;font-family:"Source Sans Pro",sans-serif;overflow:hidden}
.container{width:700px;height:400px;background:#fff;position:relative;display:grid;grid-template:100% / 50% 50%;box-shadow:2px 2px 10px 0 rgba(51,51,51,.2)}
.message{position:absolute;background:#fff;width:50%;height:100%;transition:.5s all ease;transform:translateX(100%);z-index:4}
.message:before{position:absolute;content:'';width:1px;height:70%;background:#C3C3D8;opacity:0;left:0;top:15%}
.message .button{margin:5px 0}
.signup:before{opacity:.3;left:0}
.login:before{opacity:.3;left:100%}
.btn-wrapper{width:60%}
.form{width:100%;height:100%}
.form--heading{font-size:18px;height:50px;color:#809BCE;font-family:'Playfair Display',serif}
form{width:70%}
form>*{margin:10px}
form input{width:90%;border:0;border-bottom:1px solid rgba(195,195,216,.5);font-size:13px;font-weight:300;color:#797A9E;letter-spacing:.11em}
form input::placeholder{color:#C3C3D8;font-size:10px}
form input:focus{outline:0;border-bottom:1px solid rgba(128,155,206,.7);transition:.6s all ease}
.button{width:100%;height:30px;border:0;outline:0;color:#fff;font-size:15px;font-weight:300;position:relative;z-index:3;letter-spacing:2px;background:linear-gradient(45deg,#809BCE,#9893DA);font-family:'Playfair Display',serif}
.button:hover{transform:translateY(4px);transition:.4s all ease}
@media (max-width:750px){.container{transform:scale(0.8)}}

JS

$("#signup").click(function() {
  $(".message").css("transform", "translateX(100%)");
  if ($(".message").hasClass("login")) {
    $(".message").removeClass("login");
  }
  $(".message").addClass("signup");
});

$("#login").click(function() {
  $(".message").css("transform", "translateX(0)");
  if ($(".message").hasClass("login")) {
    $(".message").removeClass("signup");
  }
  $(".message").addClass("login");
});
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Simple Sign-Up - Login Form
Login & Sign Up Form with animation
fancy form