Hello friends, today in this blog you’ll learn Animated Login Form Using HTML & CSS 2022 . We’ll use Html & Css to create this Animated Login Form . Earlier I’ve shared a blog on Css Image Hover Effect Using Html Css | Css Image Card Hover Effect .

If You have any Problem so, I Also Created a full video tutorial on this Animated Login Form Using HTML & CSS you can see this tutorial .

Index.html ---------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script
      src="https://kit.fontawesome.com/66aa7c98b3.js"
      crossorigin="anonymous"
    ></script>

  <title>Login Page</title>
</head>
<body>
  <div class="container">
    <form class="form-1">
      <h1>Login</h1>
      <label for="email">Email</label>
      <input type="email" name="email" id="email" required />
      <label for="password">Password</label>
      <input type="password" name="password" id="password" required />
      <span>Forgot Password</span>
      <button>Login</button>

      <!-- .........///sign-up///.......... -->

      <p>Or SignUp Using</p>
      <div class="icons">
        <a href="https://www.facebook.com/" target="blank"
          ><i class="fab fa-facebook-f"></i
        ></a>
        <a href="https://twitter.com/" target="blank"
          ><i class="fab fa-twitter"></i
        ></a>
        <a href="https://mail.google.com/" target="blank"
          ><i class="fab fa-google"></i
        ></a>
      </div>
    </form>
  </div>
</body>
</html>



style.css  ------------

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
}

.container .form-1 {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 40%;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3);
}

.form-1 h1 {
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 1.5rem;
}

input[type="email"],
input[type="password"] {
  border: none;
  outline: none;
  border-bottom: 1px solid;
  background: none;
  margin: 0.9rem 2rem;
  font-size: 1rem;
}

label {
  margin: 0 2rem;
}

span {
  margin: 0 2rem;
  color: blue;
  cursor: pointer;
}

button {
  margin: 2rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 1rem;
  border: none;
  font-size: 1.1rem;
  font-weight: bolder;
  color: #fff;
  background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
}

/* ........///Sign-Up///......... */

p {
  text-align: center;
  font-weight: bolder;
}

.icons {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  margin-top: 0.5rem;
}

.icons a {
  text-decoration: none;
  font-size: 1rem;
  margin: 0.2rem;
}

.icons .fa-facebook-f {
  border-radius: 50%;
  background: #5d75ab;
  color: #fff;
  padding: 1rem;
}

.icons .fa-twitter {
  border-radius: 50%;
  background: #1da1f2;
  color: white;
  padding: 1rem;
}

.icons .fa-google {
  border-radius: 50%;
  background: #ee5645;
  color: #fff;
  padding: 1rem;
}

/* ....///Media query///..... */

@media (max-width: 501px) {
  html {
    font-size: 15px;
  }

  .container .form-1 {
    width: 300px;
  }
}

@media (min-width: 501px) and (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .container .form-1 {
    width: 450px;
  }
}

@media (min-width: 765px) and (max-width: 1200px) {
  html {
    font-size: 18px;
  }

  .container .form-1 {
    width: 540px;
    height: 550px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .container {
    height: 100vmax;
  }
}