Animated Login Form using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create an Animated Login Form with Password Show or Hide Button using HTML CSS & JavaScript. Earlier I have shared an Amazing Transparent Login Form. Now, it's time to create this Animated Login Form with Password Show Hide Button.

As you know, A login form is a set of credentials used to authenticate the user before login into your website. Most often, these consist of a username and password.

In the image, you can see this is an Animated Login Form with a gradient background. Basically, in the image, there is not show password show or hide button. But when you entered some texts in the password field then the password show hide button will appear. I created those two login buttons of Facebook and Google plus is only for design. There is no action when you click on that button.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Animated Login Form).

Video Tutorial of Animated Login Form Design

If you like this program (Animated Login Form UI Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you're a beginner you can use this Login Form in your project and websites. I believe this login form code will help you a lot. Or if you have some knowledge of JavaScript or PHP you can add some functions in this format and use it according to your requirements.

Animated Login Form HTML & CSS [Source Codes]

As always, before sharing the codes of this program (Animated Login Form). Let's a few talk about the main tags and codes of this program. In the HTML File, First I created a <div> with the class name "container" and placed all other tags inside it. Then I created a <form> tag.

After that, I created another <div> with the class name "input-field" and placed two tags inside it one is <input> tag and another is <label>. And, I used a label tag to show username text. Then I copy and paste that "input-field" div tag to create a password field. After that, I created a <button> tag. The <button> tag defines a clickable button.

In the CSS File, First I reset default margins and padding to 0; Then I placed all elements at the center using Flex property. Then I put a gradient background image in the background. After that, I did basic styling to the container, inputs, and button. In the video you have seen, I used :focus pseudo-class for a slide up the label text. In the HTML File, for a button, I created a <div> with the class name "inner" for creating duplicate gradient layer. Then I did styling to button in the CSS File, to create that gradient hovers animation.

To create this program (Animated Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program. 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>Animated Login Form</title> -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="container">
      <header>Login Form</header>
      <form>
        <div class="input-field">
          <input type="text" required>
          <label>Email or Username</label>
        </div>
<div class="input-field">
          <input class="pswrd" type="password" required>
          <span class="show">SHOW</span>
          <label>Password</label>
        </div>
<div class="button">
          <div class="inner">
</div>
<button>LOGIN</button>
        </div>
</form>
<div class="auth">
Or login with</div>
<div class="links">
        <div class="facebook">
          <i class="fab fa-facebook-square"><span>Facebook</span></i>
        </div>
<div class="google">
          <i class="fab fa-google-plus-square"><span>Google</span></i>
        </div>
</div>
<div class="signup">
        Not a member? <a href="#">Signup now</a>
      </div>
</div>
<script>
      var input = document.querySelector('.pswrd');
      var show = document.querySelector('.show');
      show.addEventListener('click', active);
      function active(){
        if(input.type === "password"){
          input.type = "text";
          show.style.color = "#1DA1F2";
          show.textContent = "HIDE";
        }else{
          input.type = "password";
          show.textContent = "SHOW";
          show.style.color = "#111";
        }
      }
    </script>

  </body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
  margin: 0;
  padding: 0;
  border-radius: 5px;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
  justify-content: center;
  background: url(bg.jpg);
  background-size: cover;
  background-position: center;
}
.container{
  position: relative;
  width: 400px;
  background: white;
  padding: 60px 40px;
}
header{
  font-size: 40px;
  margin-bottom: 60px;
  font-family: 'Montserrat', sans-serif;
}
.input-field, form .button{
  margin: 25px 0;
  position: relative;
  height: 50px;
  width: 100%;
}
.input-field input{
  height: 100%;
  width: 100%;
  border: 1px solid silver;
  padding-left: 15px;
  outline: none;
  font-size: 19px;
  transition: .4s;
}
input:focus{
  border: 1px solid #1DA1F2;
}
.input-field label, span.show{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input-field label{
  left: 15px;
  pointer-events: none;
  color: grey;
  font-size: 18px;
  transition: .4s;
}
span.show{
  right: 20px;
  color: #111;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  visibility: hidden;
  font-family: 'Open Sans', sans-serif;
}
input:valid ~ span.show{
  visibility: visible;
}
input:focus ~ label,
input:valid ~ label{
  transform: translateY(-33px);
  background: white;
  font-size: 16px;
  color: #1DA1F2;
}
form .button{
  margin-top: 30px;
  overflow: hidden;
  z-index: 111;
}
.button .inner{
  position: absolute;
  height: 100%;
  width: 300%;
  left: -100%;
  z-index: -1;
  transition: all .4s;
  background: -webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);
}
.button:hover .inner{
  left: 0;
}
.button button{
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.container .auth{
  margin: 35px 0 20px 0;
  font-size: 19px;
  color: grey;
}
.links{
  display: flex;
  cursor: pointer;
}
.facebook, .google{
  height: 40px;
  width: 100%;
  border: 1px solid silver;
  border-radius: 3px;
  margin: 0 10px;
  transition: .4s;
}
.facebook:hover{
  border: 1px solid #4267B2;
}
.google:hover{
  border: 1px solid #dd4b39;
}
.facebook i, .facebook span{
  color: #4267B2;
}
.google i, .google span{
  color: #dd4b39;
}
.links i{
  font-size: 23px;
  line-height: 40px;
  margin-left: -90px;
}
.links span{
  position: absolute;
  font-size: 17px;
  font-weight: bold;
  padding-left: 8px;
  font-family: 'Open Sans', sans-serif;
}
.signup{
  margin-top: 50px;
  font-family: 'Noto Sans', sans-serif;
}
.signup a{
  color: #3498db;
  text-decoration: none;
}
.signup a:hover{
  text-decoration: underline;
}

Video Tutorial of Animated Login Form Design

You might like this:

Animated Login Form HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

23 Comments

Post a Comment

About Us

Contact Form