Login Form
Login Form

Hello Friends, Today we are going to create a login form with basic animations. The login form is used to authenticate users and restrict illegal access.

Login Form means the login page or section where users need to enter their login details like email, phone number, and password.

Table of Contents

Login Form

For creating our login form we need to create two files called index.html and style.css. We will not apply any authentication so we are not using javascript. We will create an authentication login form in another tutorial. Let’s start with our index.html file.

index.html

first, connect the style.css file in the head section. I have created both files in the same directory so I am writing this code.

<link rel="stylesheet" href="style.css">


Now write the code inside the body section.

create a div with the class name ‘login-box’ and create an h2 tag and write ‘Login’ inside the div.

<div class="login-box">
    <h2>Login</h2>

</div>


now create a form tag and create two div inside the form tag with the class name ‘user-box’.

<div class="login-box">
    <h2>Login</h2>
    <form>
      <div class="user-box">
 
      </div>
      <div class="user-box">
 
      </div>
    </form>
</div>



create an input box with a text field and a label ‘username’ inside the first ‘user-box’ div and an input box with password field and a label ‘password’ inside the another ‘user-box’ div.

<div class="login-box">
    <h2>Login</h2>
    <form>
      <div class="user-box">
        <input type="text" name="" required="">
        <label>Username</label>
      </div>
      <div class="user-box">
        <input type="password" name="" required="">
        <label>Password</label>
      </div>
      

    </form>
  </div>


here in the input element, we have used a required attribute, it is used to verify that the input box must not be blank at the submit time. It requires that the user must insert inside the boxes.

Now create an anchor tag, inside the anchor tag create four span tags. We will use this span tag to show the animated border of our button.

<div class="login-box">
    <h2>Login</h2>
    <form>
      <div class="user-box">
        <input type="text" name="" required="">
        <label>Username</label>
      </div>
      <div class="user-box">
        <input type="password" name="" required="">
        <label>Password</label>
      </div>
      <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Submit
      </a>
    </form>
  </div>


Here is our index.html file is complete, let’s create the style.css code.

style.css

First of all, we are creating variables in the :root.

:root{
  --bgColor: #ffffff;
  --formColor: linear-gradient(#4b6cb7, #182848);
  --txtColor: #ffffff;
  --txtSecondaryColor: #ffff00;
  --inputBoxBg : transparent;
  --txtBtnColor: #ffffff;
  --txtBtnSecondaryColor: #000000;
  --btnBorderColor: #ffffff;
  --btnBgColor: transparent;
  --btnBgSecondaryColor: #ffffff;
}


Variable help us to change any value from one location. In simple words, we can change a value from multiple positions using variables.

create a style for body and set the margin and padding to 0, font-family to sans-serif, and background value as a variable var(–bgColor).

body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: var(--bgColor);
}


Now it’s time to create our login-box style:

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
  background: var(--formColor);
}

when we use position absolute with top:50% and left:50%, it moves the box to the right from the center but when we use transform: translate(-50%, -50%), it aligns the box in the perfect center of the window.

create the style for h2 and user-box:

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: var(--txtColor);
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

Now design our input boxes and label:

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: var(--txtColor);
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: var(--inputBoxBg);
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: var(--txtColor);
  pointer-events: none;
  transition: .5s;
}

here we set the transition: .5s; in the label section because when we click on the input box the label text as ‘username’ or ‘password’ moves to the top, it is the transition time for that.

As I explained how the label transition works but we will set it in our next code on focus effect:

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: var(--txtSecondaryColor);
  font-size: 12px;
}

when the user clicks the input box it will become focused and the label will move to -20px to the top with the color and font-size change.

here our input, label and outer body of the form is designed, now design our button as an anchor tag.

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: var(--txtBtnColor);
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

here we used all the basic properties like, transition: .5s as we explained earlier, letter-spacing is used to give space in between laters, etc.

now design what changes should be made when the user hovers on the button.

.login-box a:hover {
  background: var(--btnBgSecondaryColor);
  color: var(--txtBtnSecondaryColor);
  border-radius: 5px;
  box-shadow: 0 0 5px var(--btnBgSecondaryColor),
              0 0 25px var(--btnBgSecondaryColor),
              0 0 50px var(--btnBgSecondaryColor),
              0 0 100px var(--btnBgSecondaryColor);
}

when the user will hover on the button we will change its background color as well as text color, border-radius, add the box-shadow, etc.

now add animation for running border effect:

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--btnBorderColor));
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

here we are creating a border for our first span tag. added border background as linear-gradient from transparent to color. when we will animate it looks like it is running because we added ‘linear’.

Same the code applies for all span tags with different degree values.

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--btnBorderColor));
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, var(--btnBorderColor));
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, var(--btnBorderColor));
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}


Here our CSS code ends, hope it was interesting and helpful!

Live Code Editor

You can run the live code in our editor below!

<!DOCTYPE html>
<head>
  <title>Login Form</title>
  <style>
    :root{
      --bgColor: #ffffff;
      --formColor: linear-gradient(#4b6cb7, #182848);
      --txtColor: #ffffff;
      --txtSecondaryColor: #ffff00;
      --inputBoxBg : transparent;
      --txtBtnColor: #ffffff;
      --txtBtnSecondaryColor: #000000;
      --btnBorderColor: #ffffff;
      --btnBgColor: transparent;
      --btnBgSecondaryColor: #ffffff;
    }
    body {
      margin:0;
      padding:0;
      font-family: sans-serif;
      background: var(--bgColor);
    }

    .login-box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400px;
      padding: 40px;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      box-shadow: 0 15px 25px rgba(0,0,0,.6);
      border-radius: 10px;
      background: var(--formColor);
    }

    .login-box h2 {
      margin: 0 0 30px;
      padding: 0;
      color: var(--txtColor);
      text-align: center;
    }

    .login-box .user-box {
      position: relative;
    }

    .login-box .user-box input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: var(--txtColor);
      margin-bottom: 30px;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      background: var(--inputBoxBg);
    }
    .login-box .user-box label {
      position: absolute;
      top:0;
      left: 0;
      padding: 10px 0;
      font-size: 16px;
      color: var(--txtColor);
      pointer-events: none;
      transition: .5s;
    }

    .login-box .user-box input:focus ~ label,
    .login-box .user-box input:valid ~ label {
      top: -20px;
      left: 0;
      color: var(--txtSecondaryColor);
      font-size: 12px;
    }

    .login-box form a {
      position: relative;
      display: inline-block;
      padding: 10px 20px;
      color: var(--txtBtnColor);
      font-size: 16px;
      text-decoration: none;
      text-transform: uppercase;
      overflow: hidden;
      transition: .5s;
      margin-top: 40px;
      letter-spacing: 4px
    }

    .login-box a:hover {
      background: var(--btnBgSecondaryColor);
      color: var(--txtBtnSecondaryColor);
      border-radius: 5px;
      box-shadow: 0 0 5px var(--btnBgSecondaryColor),
                  0 0 25px var(--btnBgSecondaryColor),
                  0 0 50px var(--btnBgSecondaryColor),
                  0 0 100px var(--btnBgSecondaryColor);
    }

    .login-box a span {
      position: absolute;
      display: block;
    }

    .login-box a span:nth-child(1) {
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--btnBorderColor));
      animation: btn-anim1 1s linear infinite;
    }

    @keyframes btn-anim1 {
      0% {
        left: -100%;
      }
      50%,100% {
        left: 100%;
      }
    }

    .login-box a span:nth-child(2) {
      top: -100%;
      right: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, transparent, var(--btnBorderColor));
      animation: btn-anim2 1s linear infinite;
      animation-delay: .25s
    }

    @keyframes btn-anim2 {
      0% {
        top: -100%;
      }
      50%,100% {
        top: 100%;
      }
    }

    .login-box a span:nth-child(3) {
      bottom: 0;
      right: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(270deg, transparent, var(--btnBorderColor));
      animation: btn-anim3 1s linear infinite;
      animation-delay: .5s
    }

    @keyframes btn-anim3 {
      0% {
        right: -100%;
      }
      50%,100% {
        right: 100%;
      }
    }

    .login-box a span:nth-child(4) {
      bottom: -100%;
      left: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(360deg, transparent, var(--btnBorderColor));
      animation: btn-anim4 1s linear infinite;
      animation-delay: .75s
    }

    @keyframes btn-anim4 {
      0% {
        bottom: -100%;
      }
      50%,100% {
        bottom: 100%;
      }
    }

  </style>
</head>
<body>
  <div class="login-box">
    <h2>Login</h2>
    <form>
      <div class="user-box">
        <input type="text" name="" required="">
        <label>Username</label>
      </div>
      <div class="user-box">
        <input type="password" name="" required="">
        <label>Password</label>
      </div>
      <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Submit
      </a>
    </form>
  </div>

</body>
</html>

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply