How To Create Animated Login Form Using HTML, CSS and JavaScript

Blogger Leb
October 15, 2020
1
how to create this login form using this HTML and CSS programming language



Hello friends, I am going to tell you in this article how you can easily create a professional and animated login form. I am going to create a login form in this article using only HTML and CSS programming language. It has the option to log in and create an account, that is, there are two options in a form. This login form was originally created using HTML and CSS programming languages ​​and some JavaScript programming language has been added to make this login more professional and responsive.

I am Shantanu Jana a web designer. I will teach you how to create this login form using this HTML and CSS programming language.

 The login form will help you to improve your HTML, CSS, and JavaScript programming skills a lot. I created the login form using simple code so that you can easily understand and learn how to create a login form.


The video below will give you an idea about this login form. This video will help you understand what it feels like to make an Animated Login Form.

Watch the video on how to make an Animated Login Form using HTML CSS

 Some special information about the login form

  • This login form is completely professional and responsive.
  •  Built using HTML, CSS, and a little JavaScript programming language.
  •  This is an animated login form with the option to log in and create an account, meaning that if your user does not have an account, you can create an account. If you have an account, you can log in. It is very professional and very nice to have these two options in one form.
  •  When you open this login form, first you will have the option of creating an account, that is, if you do not have an account, you can create your account. If you have an account, you will find the login option next to it, you can click here and log in with your user ID and password.
  •  In the case of Create Account, first of all, you can add your email then password and confirm the password.
  •  Then there is the Create Account button below. You can create an account by clicking on the Create Account button.
  • If you already have an account, you can click on the login option next to it and a new page will open in front of you through animation.
  • Here you can easily log in using a password and user ID. There are options of Facebook, Google, and to share.

 I've given the code below so you can easily try it yourself. If you want to see the demo, you can see the demo by clicking on the demo button above.

 You can also download its code i.e. HTML code, CSS code, and JavaScript code by clicking on the download option. Also below I have given all these codes, you can copy those codes and use them in your web site or project. How to add this code to your project or website is described below. You can add that to your website or blog or your own project by following that description.

Side Menu Bar Menu Using HTML and CSS[Source Code⇩]

Hopefully from the video above you can fully understand how to make and work this transparent login form. If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).

Also if you want to put HTML and CSS code in a file, you can do that. For that, give HTML code in body tags (<body></body>) and CSS code in head tags. Then your program will work beautifully. If you encounter any problems, you can take the help of the video above.


Note:  I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. However, there is no change in the code, but the amount of code has increased a lot. Hover you can use this code if you want there will be no problem. But you can download the code, it would be best.

HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.

 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ashish Jaiswar</title>
    <link rel="stylesheet" href="main.css" />
    <script
      src="https://kit.fontawesome.com/1032187501.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <div class="signup-container">
        <h2>Don't Have a account</h2>
        <p><!--<li>COLOR</li>
          <li class="yellow"></li>
          <li class="black"></li>
          <li class="blue"></li>
        </ul>-->
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Necessitatibus veniam voluptas accusantium distinctio.
        </p>
        <button id="signup">Create account</button>
      </div>
      <div class="signin-container">
        <h2>Already have an account?</h2>
        <p>
          /*<!--I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. -->
          */
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Necessitatibus veniam voluptas accusantium distinctio.
        </p>
        <button id="login">Login</button>
      </div>
      <div class="overlay" id="slide">
        <div class="form-container signup-form">
          <form action="">
            <h3>Create account</h3>
            <div class="social-container">
              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="social"
                ><i class="fab fa-google-plus-g"></i
              ></a><!--<li>COLOR</li>
                <li class="yellow"></li>
                <li class="black"></li>
                <li class="blue"></li>
              </ul>-->
              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <div class="input-container">
              <input type="text" placeholder="Email...." />
            </div>
            <div class="input-container">
              <input type="text" placeholder="Password...." />
            </div>/*<!--I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. -->
            */
            <div class="input-container">
              <input type="text" placeholder="Confirm password..." />
            </div>
<!--<i class="fa fa-search"></i>
          <i class="fa fa-user"></i>
          <i class="fa fa-shopping-cart"></i>
        </div>-->
            <button class="form-button">
              Create account
            </button>
          </form>
        </div>

        <div class="form-container signin-form">
          <form action="" id="signup">
            <h3>Login</h3>
            <div class="social-container">
              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="social"
                ><i class="fab fa-google-plus-g"></i
              ></a><!--<i class="fa fa-search"></i>
                <i class="fa fa-user"></i>
                <i class="fa fa-shopping-cart"></i>
              </div>-->
              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <div class="input-container">
              <input type="text" placeholder="Email...." />
            </div>
            <div class="input-container">
              <input type="text" placeholder="password...." />
            </div><!--<li>COLOR</li>
              <li class="yellow"></li>
              <li class="black"></li>
              <li class="blue"></li>
            </ul>-->
            <div class="forgot__password-container">
              <a href="#">Forgot password? </a>
            </div>

            <button class="form-button">Login</button>
          </form>
        </div>
      </div><!--<li class="bg">9</li>
        <li class="bg">10</li>
        <li class="bg">11</li>-->
    </div>
       

       


CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

 *,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}
body {
  font-family: "Open Sans", sans-serif;
  background-image: url("https://i.postimg.cc/zBf0kpnG/background.png");
  font-size: 1.8rem;
}

.container {
  background: rgba(43, 43, 43, 0.8);
  width: 60%;
  height: 35rem;
  margin: 0 auto;
  margin-top: 20rem;
  display: flex;
  align-items: center;
  position: relative;
}
/*h1 {
  color: #ff6d39;
  font-family: "muli";
  font-weight: bold;
  font-size: 22px;
  margin-top: 21px;
  display: inline-block;
}

i.fa.fa-search {
  margin-left: 90px;
}
*/
.signup-container,
.signin-container {
  padding: 5rem;
}
.signin-container {
  text-align: right;
}
h2 {
  color: #fff;
  margin: 1rem 0;
}

p {
  color: #ddd;
  font-size: 1.3rem;
  margin: 1rem 0;
}
/*
h3 {
  color: #ffffff;
  font-family: "muli";
  margin-top: 84px;
  font-size: 20px;
  font-weight: 500;
}

h2 {
  color: #ffffff;
  font-family: "muli";
  margin-top: 10px;
  font-weight: 800;
  font-size: 29px;
}*/
.forgot__password-container {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}
button {
  padding: 1rem 2rem;
  border: none;
  color: rgb(24, 24, 24);
  background: #ddd;
  cursor: pointer;
  border-radius: 2px;
  outline: none;
  transition: all 0.3s;
}

button:hover {
  background: #fff;
}
/*h1 {
  color: #ff6d39;
  font-family: "muli";
  font-weight: bold;
  font-size: 22px;
  margin-top: 21px;
  display: inline-block;
}

i.fa.fa-search {
  margin-left: 90px;
}
*/
button:active {
  transform: translatey(2px);
}

.overlay {
  position: absolute;
  top: -2rem;
  left: 0;
  width: 50%;
  transition: all 1s;
}

.form-container {
  background: #fff;
  padding: 5rem;
  height: 40rem;
  border-radius: 4px;
   width: 100%;
  transition: all 1s;
}

h3 {
  color: rgb(65, 65, 65);
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

a {
  text-decoration: none;
  color: #1ec47b;
}
/*h1 {
  color: #ff6d39;
  font-family: "muli";
  font-weight: bold;
  font-size: 22px;
  margin-top: 21px;
  display: inline-block;
}

i.fa.fa-search {
  margin-left: 90px;
}
*/
a:hover {
  color: #0fb66e;
}
.input-container {
  margin: 1.5rem 0;
}
input {
  padding: 1rem 2.4rem;
  border-radius: 2px;
  border: 1px solid rgb(128, 128, 128);
  outline: none;
  width: 100%;
}

.form-button {
  background: #1ec47b;
  color: #fff;
  outline: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.22);
}
/*
h3 {
  color: #ffffff;
  font-family: "muli";
  margin-top: 84px;
  font-size: 20px;
  font-weight: 500;
}

h2 {
  color: #ffffff;
  font-family: "muli";
  margin-top: 10px;
  font-weight: 800;
  font-size: 29px;
}*/
.form-button:hover {
  background: #0fb66e;
}
.signup-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.signin-form {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: -1;
  opacity: 0;
}

.slide-right {
  left: 50%;
}

.slide-left {
  left: 0;
}

.social-container {
  text-align: center;
}
/*h1 {
  color: #ff6d39;
  font-family: "muli";
  font-weight: bold;
  font-size: 22px;
  margin-top: 21px;
  display: inline-block;
}

i.fa.fa-search {
  margin-left: 90px;
}
*/
.social-container a {
  border: 1px solid #dddddd;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 4rem;
  width: 4rem;
}


JavaScript Code(<body><script>Add code</script></body>)

let login = document.getElementById("login");
let signup = document.getElementById("signup");
let slide = document.getElementById("slide");
let signinForm = document.querySelector(".signin-form");
let signupForm = document.querySelector(".signup-form");
/*<li>COLOR</li>
          <li class="yellow"></li>
          <li class="black"></li>
          <li class="blue"></li>
        </ul>*/
login.addEventListener("click", () => {
  slide.classList.add("slide-right");
  slide.classList.remove("slide-left");
  signinForm.style.zIndex = "2";
  signinForm.style.opacity = "1";
});
/*<li>COLOR</li>
          <li class="yellow"></li>
          <li class="black"></li>
          <li class="blue"></li>
        </ul>*/
signup.addEventListener("click", () => {
  slide.classList.add("slide-left");
  slide.classList.add("slide-right");
  signinForm.style.zIndex = "-1";
  signinForm.style.opacity = "0";
});



Hopefully from this article, you have learned how to create a Professional and animated Login Form using only HTML and CSS programming languages. If you have any problems, you can let me know by commenting. I will help you in any way I can. Thanks for reading to the end of the article.

❤Sharing is caring❤

Tags
Share to other apps

You may like these posts

Show more

Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. KMDecember 4, 2020 at 3:17 AM

    Giving error in html file
    The id value [ signup ] must be unique.(id-unique)

    ReplyDelete
Post a Comment
To Top