Develop an animated login form with CSS transitions.

Hey, I am Ajink, and today in this blog, we’re going to develop an animated login form with CSS transitions. Adding animations to your forms can enhance user experience and make your website more engaging.

HTML Code: create a index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Animated Login Form</title>
</head>
<body>
  <div class="login-container">
    <form class="login-form">
      <h1>Login</h1>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>

      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>

      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

HTML Code Explanation:

  • We have a basic HTML structure with a login form containing input fields for the username and password.

CSS Code: style.css

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #3498db;
}

.login-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Hide overflowing content during animation */
}

.login-form {
  max-width: 300px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-50px);
  animation: slideIn 0.5s ease-out 0.5s forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-form h1 {
  text-align: center;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #333;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s ease-in-out;
}

input:focus {
  border-color: #3498db;
}

button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #2980b9;
}

CSS Code Explanation:

  • The CSS provides styling for the login form, including colors, spacing, and transitions.
  • Transitions are applied to form elements to create smooth animations.

Conclusion:

In this blog, we successfully developed an animated login form with CSS transitions. You can customize the styling and animations to fit your website’s design. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 59