Animated Login & Signup Form Design using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create an Animated Login & Signup Form using HTML CSS & JavaScript. Earlier I have shared many blogs on how to create a login form but now it's time to create an Animated Login and Signup Form in one page.

In this program (Animated Login & Signup Form Design), on the webpage, there is a login page or form and two toggle buttons at the top of the form labeled as "Login" and "Signup" as you can see in the image. When you click on the signup button, the login form smoothly slides from the right to the left side and shows you the signup form.

And again after clicking the login button, the signup form slide from left to the right side and shows you the login form. In this form, the login and signup form both are on the same page. If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Animated Login & Signup Form Design).

Video Tutorial of Animated Login & Signup Form Design

In the video, you have seen an animated login and signup form and I hope you've understood the basic codes behind creating this program. I used just a few lines of JavaScript codes to complete this form so if you're a beginner, then you can easily create this type of login and signup form.

I used JavaScript only to slide the form on button click and the toggle tab which slide from login text to signup text and signup text to login text is fully based on pure HTML & CSS. If you like this program (Animated Login & Signup Form Design) and want to get source codes. You can easily get the source codes of this program.

Animated Login & Signup Form Design [Source Codes]

To create this program (Animated Login & Signup Form Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Login & Signup Form | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <div class="title-text">
        <div class="title login">
Login Form</div>
<div class="title signup">
Signup Form</div>
</div>
<div class="form-container">
        <div class="slide-controls">
          <input type="radio" name="slide" id="login" checked>
          <input type="radio" name="slide" id="signup">
          <label for="login" class="slide login">Login</label>
          <label for="signup" class="slide signup">Signup</label>
          <div class="slider-tab">
</div>
</div>
<div class="form-inner">
          <form action="#" class="login">
            <div class="field">
              <input type="text" placeholder="Email Address" required>
            </div>
<div class="field">
              <input type="password" placeholder="Password" required>
            </div>
<div class="pass-link">
<a href="#">Forgot password?</a></div>
<div class="field btn">
              <div class="btn-layer">
</div>
<input type="submit" value="Login">
            </div>
<div class="signup-link">
Not a member? <a href="">Signup now</a></div>
</form>
<form action="#" class="signup">
            <div class="field">
              <input type="text" placeholder="Email Address" required>
            </div>
<div class="field">
              <input type="password" placeholder="Password" required>
            </div>
<div class="field">
              <input type="password" placeholder="Confirm password" required>
            </div>
<div class="field btn">
              <div class="btn-layer">
</div>
<input type="submit" value="Signup">
            </div>
</form>
</div>
</div>
</div>
<script>
      const loginText = document.querySelector(".title-text .login");
      const loginForm = document.querySelector("form.login");
      const loginBtn = document.querySelector("label.login");
      const signupBtn = document.querySelector("label.signup");
      const signupLink = document.querySelector("form .signup-link a");
      signupBtn.onclick = (()=>{
        loginForm.style.marginLeft = "-50%";
        loginText.style.marginLeft = "-50%";
      });
      loginBtn.onclick = (()=>{
        loginForm.style.marginLeft = "0%";
        loginText.style.marginLeft = "0%";
      });
      signupLink.onclick = (()=>{
        signupBtn.click();
        return false;
      });
    </script>

  </body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
::selection{
  background: #fa4299;
  color: #fff;
}
.wrapper{
  overflow: hidden;
  max-width: 390px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title-text{
  display: flex;
  width: 200%;
}
.wrapper .title{
  width: 50%;
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border: 1px solid lightgrey;
  border-radius: 5px;
}
.slide-controls .slide{
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.6s ease;
}
.slide-controls label.signup{
  color: #000;
}
.slide-controls .slider-tab{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  z-index: 0;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
  display: none;
}
#signup:checked ~ .slider-tab{
  left: 50%;
}
#signup:checked ~ label.signup{
  color: #fff;
  cursor: default;
  user-select: none;
}
#signup:checked ~ label.login{
  color: #000;
}
#login:checked ~ label.signup{
  color: #000;
}
#login:checked ~ label.login{
  cursor: default;
  user-select: none;
}
.wrapper .form-container{
  width: 100%;
  overflow: hidden;
}
.form-container .form-inner{
  display: flex;
  width: 200%;
}
.form-container .form-inner form{
  width: 50%;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
}
.form-inner form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  border-bottom-width: 2px;
  font-size: 17px;
  transition: all 0.3s ease;
}
.form-inner form .field input:focus{
  border-color: #fc83bb;
  /* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
  color: #999;
  transition: all 0.3s ease;
}
form .field input:focus::placeholder{
  color: #b3b3b3;
}
.form-inner form .pass-link{
  margin-top: 5px;
}
.form-inner form .signup-link{
  text-align: center;
  margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
  color: #fa4299;
  text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
  text-decoration: underline;
}
form .btn{
  height: 50px;
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
form .btn .btn-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #a445b2, #fa4299, #a445b2, #fa4299);
  border-radius: 5px;
  transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
  left: 0;
}
form .btn input[type="submit"]{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  padding-left: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}

Thanks for visiting, Keep visiting.

23 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

CodingNepalSeptember 9, 2020 at 3:08 PM
Thank you :)
MonkeySeptember 19, 2020 at 3:18 PM
how i do like a database for save the login accounts
Rave from G.SPYSeptember 23, 2020 at 4:23 AM
I'm a fan ✊🏾🤞🏽
ashu-senpaiSeptember 28, 2020 at 11:50 AM
Please upload that Step Progress Bar's code also.
UnknownOctober 1, 2020 at 4:23 PM
cool
UnknownOctober 30, 2020 at 6:55 PM
They are telling me that "::placeholder" is not a pseudo-element! What should I do?! Thx.
JonDevNovember 5, 2020 at 1:54 PM
I'm your fan sir and can you please create a navigation bar that has javascript code?

ArdiGamers30November 9, 2020 at 4:30 AM
how about the database and the connection?
ArdiGamers30November 9, 2020 at 4:31 AM
how about the database and the connection?
UnknownMarch 3, 2021 at 4:56 PM
its very nice form but why you call class by using all direction for it ?
for example when you need to wrate code in .form-inner form .field input{}
what if I call input from field class like this
.field input ?
UnknownMarch 4, 2021 at 8:13 AM
thank you very much .. I learned so much things from you bro
Abinav ShankarMarch 19, 2021 at 2:45 PM
For some reason, The methods to set margin to -50% doesn't work for me. So Login form and Login text are persistent. I'm using JavaScript in a separate file by the way and I have referenced it.
jd.kalsariyaMarch 27, 2021 at 10:34 AM
thank you very much .. I learned so much things from you bro i like it
RA-moviesApril 14, 2021 at 7:32 PM
Hello sir i need help. Would you help me
UnknownApril 26, 2021 at 8:00 AM
Thank you for your contribution

Video Tutorial of Animated Login & Signup Form Design

You might like this:

Animated Login & Signup Form Design [Source Codes]

Thanks for visiting, Keep visiting.

23 Comments

Post a Comment

About Us

Contact Form