Animated Login Form Using Html & Css | Perfec2 Tech

 How to Create Animated Login Form Using Html & CSS

Animated Login Form Using Html & Css | Perfec2 Tech

In this post, you will learn how to create Animated Login Form Using Html & CSS. We Use Login Form in Many Places. However, We need to fill it in many Places.

So in This post, I will teach you  How to Create Animated Login Form Using Html & CSS?

The animated Login Form works, a Lighted line moving around the button and the Button shows the Lightning effect on hover.

Login Form Project:

Animated Login Form Has many Benefits. Like It looks Attractive, Professional. Peoples also like that type of login form.

This design is very easy to make. HTML and some CSS are used here.

---

As you can see above, this is a simple project where the Submit Button Gave Animation that looks Attractive.

Animated Login Form Using Html & CSS?

Now, if you want to create this simple Animated Login Form, follow the guide below. Here I have given all the codes and explained how these codes work.

Step 1: Structure of Login Form:

First, create a Login Form at the website by the use of the HTML code below.

Html

    
<div class="login-box">
  <h2>Login</h2>
  <form>
    <div class="user-box">
      <input type="text" name="" required="">
      <label>Your Name</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>
    

Step 2: Design Animated Login Form:
Now it's time to style the Animated Login Form with some CSS. As you can see, we have set a width and height for this Login Form. I added a background color with it.



  
CSS
  

     
  html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#042e06, #578259);
}

.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: #dcf403;
  font-size: 12px;
}

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

.login-box a:hover {
  background: #dcf403;
  color: #578259;
  border-radius: 5px;
  box-shadow: 0 0 5px #dcf403,
              0 0 25px #dcf403,
              0 0 50px #dcf403,
              0 0 100px #dcf403;
}

.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, #dcf403);
  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, #578259);
  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, #dcf403);
  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, #578259);
  animation: btn-anim4 2s linear infinite;
  animation-delay: .75s
}

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


Hopefully, you have been able to create Animated Login Form using the above code.