Beautiful login Form using HTML, CSS and Javascript

 

Here you can log in and register in this element. When you open this login and registration form, you can first see all the login information. Then when you click the registration button in The New Bar, you will see the information on the registration form. If you don't understand what I'm saying, follow the demo section below. Here I have given the live preview and the desired source code.

HTML CODE

 HTML CSS JS Result Skip Results Iframe  
 <div class="align">  
   <div class="card">  
    <div class="head">  
     <div></div>  
     <a id="login" class="selected" href="#login">Login</a>  
     <a id="register" href="#register">Register</a>  
     <div></div>  
    </div>  
    <div class="tabs">  
     <form>  
      <div class="inputs">  
       <div class="input">  
        <input placeholder="Username" type="text">  
       </div>  
       <div class="input">  
        <input placeholder="Password" type="password">  
       </div>  
       <label class="checkbox">  
        <input type="checkbox">  
        <span>Remember me</span>  
       </label>  
      </div>  
      <button>Login</button>  
     </form>  
     <form>  
      <div class="inputs">  
       <div class="input">  
        <input placeholder="Email" type="text">  
       </div>  
       <div class="input">  
        <input placeholder="Username" type="text">  
       </div>  
       <div class="input">  
        <input placeholder="Password" type="password">  
       </div>  
      </div>  
      <button>Register</button>  
     </form>  
    </div>  
   </div>  
  </div>  

CSS CODE

 * {  
  box-sizing: border-box;  
  margin: 0;  
  padding: 0;  
  text-decoration: none;  
  font-family: "Roboto";  
  outline: none;  
  border: none;  
 }  
 html, body {  
  height: 100%;  
  background: #0A0A0A;  
 }  
 .align {  
  height: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  flex-direction: column;  
  padding-bottom: 8px;  
 }  
 .card {  
  margin-top: 28px;  
  height: 100%;  
  max-height: 446px;  
  width: 396px;  
  background: #121212;  
  border: 1px solid #373737;  
  border-radius: 10px;  
  overflow: hidden;  
  transition: max-height 0.2s;  
 }  
 .extend {  
  max-height: 480px;  
 }  
 .head {  
  width: 100%;  
  display: flex;  
 height: 72px;  
  border-bottom: 1px solid #373737;  
  justify-content: space-between;  
 }  
 .head a {  
  height: 100%;  
  padding: 0 28px;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  color: rgb(140,140,140);  
  font-size: 20px;  
  font-weight: 500;  
 }  
 .head .selected {  
  position: relative;  
  color: #00FF5C;  
  font-weight: 700;  
 }  
 .head .selected:after {  
  position: absolute;  
  content: "";  
  bottom: 0;  
  left: 0;  
  height: 5px;  
  width: 100%;  
  background: #00FF5C;  
  border-radius: 99px 99px 0 0;  
 }  
 .tabs {  
 height: calc(100% - 72px);  
  display: flex;  
 }  
 form {  
  width: 100%;  
  height: 100%;  
  flex-shrink: 0;  
  padding: 44px 38px;  
  display: flex;  
  flex-direction: column;  
  justify-content: space-between;  
  align-items: center;  
  position: relative;  
  right: 0;  
  transition: right 0.2s;  
 }  
 .extend form {  
  right: 100%;  
 }  
 .inputs {  
  width: 100%;  
  padding-top: 6px;  
 }  
 .input {  
  position: relative;  
  margin-bottom: 20px;  
  width: 100%;  
  display: flex;  
  align-items: center;  
 }  
 .input input {  
  width: 100%;  
 font-size: 17px;  
  background: #1C1C1C;  
  border-radius: 8px;  
  padding: 16px 18px 16px 51px;  
  color: rgb(220,220,220);  
 }  
 .checkbox {  
  height: 40px;  
  display: flex;  
  align-items: center;  
  position: relative;  
  cursor: pointer;  
 }  
 .checkbox input {  
  position: absolute;  
  opacity: 0;  
  height: 0;  
 width: 0;  
 }  
 .checkbox span {  
  display: flex;  
  align-items: center;  
  color: rgb(110,110,110);  
  font-size: 16px;  
  user-select: none;  
 }  
 .checkbox span:before {  
  content: "";  
  width: 22px;  
  height: 22px;  
  border-radius: 6px;  
  margin-right: 16px;  
  background-color: #1C1C1C;  
 }  
 .checkbox:hover input ~ span:before {  
  background-color: rgb(50,50,50);  
 }  
 .checkbox input:checked ~ span:before {  
  background-image: url(../img/checked.png);  
  background-size: cover;  
 }  
 .card button {  
  display: block;  
  background: #00FF5C;  
  padding: 14px 52px;  
 border-radius: 12px;  
  color: #003B15;  
  font-weight: 700;  
  font-size: 21px;  
  cursor: pointer;  
 }  

Javascript CODE

 $(window).on("hashchange", function(){  
  if(location.hash.slice(1)=="register"){  
   $(".card").addClass("extend");  
   $("#login").removeClass("selected");  
   $("#register").addClass("selected");  
  } else {  
   $(".card").removeClass("extend");  
   $("#login").addClass("selected");  
   $("#register").removeClass("selected");  
  }  
 });  
 $(window).trigger("hashchange");  

As you can see, a box is created on a black background. Firstly, there are two texts in the box. Both these text will function primarily as selected buttons. In normal circumstances, the first text i.e. login option will be selected. Login form information can be viewed after login option is selected. To log in, you'll see a username, password input space, and login button. When you select another option, all information in the registration form will be available. First insert the email ID, then username, and then password input to view the location.