Animated Login Form Using HTML and CSS
Published: 2023-05-15 05:50:36

Welcome, Coders! Here we are at codewithrandom again. In this blog post, we create an Animated Login Form Using Html And Css With Source Code.

In this lesson, we'll create an animated **[Login Form](https://www.codewithrandom.com/2023/01/06/login-form-with-floating-placeholder-animated-login-form-codewithrandom/)** Using HTML and CSS. We have a username and password input field with floating placeholder animation.

I'm confident you'll be disappointed by the animated version we produce. Since it can be difficult to make mobile-responsive forms, we also used responsive design to build this form, so this article also contains responsive code.

I hope you enjoy our blog so let's start with a basic html structure for the Login Form.

## Animated Login Form Html Code:-
```
<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>

```

There is all the Html code for the animated Login Form. Now, you can see output without CSS, then we write CSS for the Animated Login Form.

## Animated Login Form Css Code:-
```
html { height: 100%; } body { margin:0; padding:0; font-family: sans-serif;
background: linear-gradient(#141e30, #243b55); } .login-box { position:
absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform:
translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .login-box h2 {
margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box
.user-box { position: relative; } .login-box .user-box input { width: 100%;
padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border:
none; border-bottom: 1px solid #fff; outline: none; background: transparent; }
.login-box .user-box label { position: absolute; top:0; left: 0; padding: 10px
0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; }
.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~
label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } .login-box form
a { position: relative; display: inline-block; padding: 10px 20px; color:
#03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase;
overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px }
.login-box a:hover { background: #03e9f4; color: #fff; border-radius: 5px;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px
#03e9f4; } .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, #03e9f4); 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, #03e9f4); 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, #03e9f4); 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, #03e9f4); animation: btn-anim4 1s linear infinite; animation-delay:
.75s } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }

```

First, we'll use the html tag selector to set the height to 100%. Next, we'll use the body tag selector to set the padding and margin to zero. 
Finally, we'll use the font family property to set the font family to sans-serif. Finally, we'll use the background property to set the background to a linear gradient of the colours blue and black.
```
html { height: 100%; } body { margin:0; padding:0; font-family: sans-serif;
background: linear-gradient(#141e30, #243b55); }

```

Now, using the class selector (.login-box), we will fix the position to absolute, and using the top and left properties, we will leave a 50% space from the top and left. We'll set the breadth of our login form to 400px using the width property.

We'll use the hover attribute to add styling to our button. Along with that, we are going to add the hover property to the button. Using the keyframe, we are also going to animate the boundary around the button.
```
.login-box { position: absolute; top: 50%; left: 50%; width: 400px; padding:
40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing:
border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; }
.login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; }
.login-box .user-box { position: relative; } .login-box .user-box input { width:
100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px;
border: none; border-bottom: 1px solid #fff; outline: none; background:
transparent; } .login-box .user-box label { position: absolute; top:0; left: 0;
padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition:
.5s; } .login-box .user-box input:focus ~ label, .login-box .user-box
input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; }
.login-box form a { position: relative; display: inline-block; padding: 10px
20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform:
uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing:
4px } .login-box a:hover { background: #03e9f4; color: #fff; border-radius: 5px;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px
#03e9f4; } .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, #03e9f4); 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, #03e9f4); 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, #03e9f4); 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, #03e9f4); animation: btn-anim4 1s linear infinite; animation-delay:
.75s } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }

```

Now we have completed our Animated Login Form. Here is our final updated output HTML CSS.

Here is our updated output with CSS. I hope you like the Animated Login Form. You can see output project screenshots. See our other blogs and gain knowledge in front-end development.

In this post, we learn how to create an Animated **[Login Form](https://www.codewithrandom.com/2023/01/06/login-form-with-floating-placeholder-animated-login-form-codewithrandom/)** Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by - Code With Random/Anki