Animated Login Form Using HTML and CSS

In this article I have shown you how to create an animated login form using HTML and CSS. Earlier I shared with you the design of different types of login forms.

Border animation has been used in this case. The design of the animated login form that I have seen before is very complex. HTML CSS and JavaScript were used there.

However, this animated login form is very simple. Only border-color animation is used, for which only HTML and CSS are used.

Animated Login Form Using HTML CSS

The necessary information for the login form such as text, input boxes and buttons has been created using HTML. Forms have been designed using CSS and animations have been added.

Below is a video that will help you get a live demo of it. In this video I have shared the complete tutorial.

As you can see above, this is a simple login form. Where a heading is used first and then a username, a box created to input the password. Four color animations can be noticed on the border of this login form.

@Keyframes have been used to make this animation work. To make it, you must have a basic idea about HTML and CSS.

Related Post

1. Animated Login Form Design
2. Responsive Registration Form
3. Transparent Login Form
4. Glassmorphism Login Form
5. Neumorphism Login Form HTML CSS
6. Login and Registration Form
7. Create a Popup Login Form

Here I have given the required source code and tried to give a possible explanation of each code. If you want step by step tutorial then you can watch the video above.

1. HTML of Animated Login Form

The following HTML codes are used to generate the basic information of the login form. First I used four (span) which are used for border animation around this login form.

Then I used a heading. Then I created two input boxes to input the username and password. I used the input function of HTML to create the input boxes. Then there is a login button.

<form action="" class="form">
<!-- Border Animation -->
   <span></span>
   <span></span>
   <span></span>
   <span></span>
<!-- Login Form Area -->
 <div class="form-inner">
   <h2>LOGIN</h2>
<!-- Input Place -->
    <div class="content">
      <input class="input" type="text" placeholder="Username" />
      <input class="input" type="password" placeholder="Password" />
      <button class="btn">LOGIN</button></div>
   </div>
</form>

2. Animated Login Form CSS Code

Basic design of login form and animation has been added using the following CSS code. First I designed the webpage then the basic design of the animated login form.

I have added animation at the end of all. @Keyframes have been used to make the animation work. Four types of color animation have been used for the four aspects.

If you have a basic idea about keyframes, you can easily understand how the animations work.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Design the webpage */
body {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #0c0116;
}
/* Basic structure of login form */
.form {
position: relative;
padding: 60px 15px;
width: 270px;
height: 350px;
background: #0c0116;
overflow: hidden;
box-shadow: 0px 0px 10px 0px rgb(116, 119, 114);
border-radius: 5px;
}
/* The main area of the login form */
.form-inner {
position: absolute;
height: 98%;
width: 98%;
top: 50%;
left: 50%;
background: #0c0116;
transform: translate(-50%, -50%);
}

.content {
height: 100%;
width: 100%;
padding: 25px;
}
/* Heading design of login form */
.form-inner h2 {
font-size: 25px;
color: #d7a3d7;
text-align: center;
padding-top: 35px;
}
/* Place to input the login form */
.input {
display: block;
padding: 12px 15px;
width: 100%;
left: 50%;
border-radius: 10px;
margin-top: 20px;
border: 1.5px solid rgb(109, 87, 121);
outline: none;
background: #19052c;
color: white;
}
/* Login button */
.btn {
cursor: pointer;
color: white;
margin-top: 40px;
width: 100%;
padding: 12px;
outline: none;
background: #800080;
border: none;
font-size: 18px;
border-radius: 10px;
transition: 0.4s;
}
.btn:hover {
background: #c907c9;
}
/* Border animation of login form */
.form span {
position: absolute;
height: 50%;
width: 50%;
}
/* Animation of the first line */
.form span:nth-child(1) {
background: #ffda05;
top: 0;
left: -48%;
animation: 5s span1 infinite linear;
animation-delay: 1s;
}

@keyframes span1 {
0% {
  top: -48%;
  left: -48%;
}
25% {
  top: -48%;
  left: 98%;
}
50% {
  top: 98%;
  left: 98%;
}
75% {
  top: 98%;
  left: -48%;
}
100% {
  top: -48%;
  left: -48%;
}
}
/* Animation of the second line */
.form span:nth-child(2) {
background: #00a800;
bottom: 0;
right: -48%;
animation: 5s span2 infinite linear;
}

@keyframes span2 {
0% {
  bottom: -48%;
  right: -48%;
}
25% {
  bottom: -48%;
  right: 98%;
}
50% {
  bottom: 98%;
  right: 98%;
}
75% {
  bottom: 98%;
  right: -48%;
}
100% {
  bottom: -48%;
  right: -48%;
}
}
/* Animation of the third line */
.form span:nth-child(3) {
background: #800080;
right: -48%;
top: 0px;
animation: 5s span3 infinite linear;
}

@keyframes span3 {
0% {
  top: -48%;
  left: -48%;
}
25% {
  top: -48%;
  left: 98%;
}
50% {
  top: 98%;
  left: 98%;
}
75% {
  top: 98%;
  left: -48%;
}
100% {
  top: -48%;
  left: -48%;
}
}
/* Animation of the fourth line */
.form span:nth-child(4) {
background: #ff0000;
bottom: 0;
right: -48%;
animation: 5s span4 infinite linear;
animation-delay: 1s;
}

@keyframes span4 {
0% {
  bottom: -48%;
  right: -48%;
}
25% {
  bottom: -48%;
  right: 98%;
}
50% {
  bottom: 98%;
  right: 98%;
}
75% {
  bottom: 98%;
  right: -48%;
}
100% {
  bottom: -48%;
  right: -48%;
}
}

Hopefully you can create this animated login form using the code above. If there is any difficulty then you can definitely let me know by commenting.

If you want you can download all the source code to create this animated login form.