Make Animated Login Page In HTML & CSS & JQuery

by

As a beginner in web design development course after learning some tag and codes you need to know how to make a Login Page In HTML. In this post, I will show you how to make an animated login form using HTML and CSS using little bit JQuery.

login page in html

I build this form with coding in Sublime Text3. You can download it here free. This tool is very simple and lite for learning Web Design. Also, it has a lot of features for making your journey easier in web site building part.

When you need to make login and registration form in HTML before connect PHP or database firs you have to some knowledge in the login HTML template. Here I will provide you HTML code for the login page. The codes help you to create login page in HTML with CSS code. I use here some JQurey.

How To Make Login Page In HTML

For making html login page template first you have to install a text editor software like Sublime Text or Notepad++.

Then copy the code from below and paste it in your text editor file.

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
  <head>
    <meta charset=”utf-8″>
    <title></title>
    <link rel=”stylesheet” href=”style.css”>
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js” charset=”utf-8″></script>
  </head>
  <body>

      <form action=”index.html” class=”login-form”>
        <h1>Login</h1>

        <div class=”txtb”>
          <input type=”text”>
          <span data-placeholder=”Username”></span>
        </div>

        <div class=”txtb”>
          <input type=”password”>
          <span data-placeholder=”Password”></span>
        </div>

        <input type=”submit” class=”logbtn” value=”Login”>

        <div class=”bottom-text”>
          Don’t have account? <a href=”#”>Sign up</a>
        </div>

      </form>

      <script type=”text/javascript”>
      $(“.txtb input”).on(“focus”,function(){
        $(this).addClass(“focus”);
      });

      $(“.txtb input”).on(“blur”,function(){
        if($(this).val() == “”)
        $(this).removeClass(“focus”);
      });

      </script>


  </body>
</html>

Then save the file in a new folder with the name index.html


The first step is done and secondly, you should create another window in your text editor file with the name of style.css

Now copy the CSS code and paste in the empty field and press Ctrl+S for save the file in the same folder must.

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: montserrat;
  box-sizing: border-box;
}
body{
  min-height: 100vh;
  background-image: linear-gradient(120deg,#f0b501,#8e44ad);
}
.login-form{
  width: 360px;
  background: #f1f1f1;
  height: 580px;
  padding: 80px 40px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.login-form h1{
  text-align: center;
  margin-bottom: 60px;
}
.txtb{
  border-bottom: 2px solid #adadad;
  position: relative;
  margin: 30px 0;
}
.txtb input{
  font-size: 15px;
  color: #333;
  border: none;
  width: 100%;
  outline: none;
  background: none;
  padding: 0 5px;
  height: 40px;
}
.txtb span::before{
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  z-index: -1;
  transition: .5s;
}
.txtb span::after{
  content: ”;
  position: absolute;
  width: 0%;
  height: 2px;
  background: linear-gradient(120deg,#f0b501,#8e44ad);
  transition: .5s;
}
.focus + span::before{
  top: -5px;
}
.focus + span::after{
  width: 100%;
}
.logbtn{
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg,#f0b501,#8e44ad,#f0b501);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
}
.logbtn:hover{
  background-position: right;
}
.bottom-text{
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
}


Now double click on the icon index.html and open it in your default browser with Animated Login Page.

Read Also:
1. Pricing Table With HTML & CSS

Leave a Comment