Welcome to this tutorial on Animated Login Form UI Design using CSS. This is an automatically generated post based on popular examples to help you learn and implement this concept.

HTML Structure

Here is the basic HTML structure for this project:

<div class="animated-login-wrapper">
  <div class="background-shapes">
    <div class="shape shape-1"></div>
    <div class="shape shape-2"></div>
    <div class="shape shape-3"></div>
  </div>
  <div class="login-card">
    <div class="login-header">
      <h2>Welcome Back</h2>
      <p>Please enter your details to sign in.</p>
    </div>
    <form class="login-form" id="animated-form">
      <div class="input-group">
        <input type="email" id="email" required>
        <label for="email">Email Address</label>
        <span class="focus-border"></span>
      </div>
      <div class="input-group">
        <input type="password" id="password" required>
        <label for="password">Password</label>
        <span class="focus-border"></span>
      </div>
      <div class="form-actions">
        <label class="remember-me">
          <input type="checkbox">
          <span>Remember me</span>
        </label>
        <a href="#" class="forgot-password">Forgot Password?</a>
      </div>
      <button type="submit" class="login-btn">Sign In</button>
    </form>
    <p class="signup-link">Don't have an account? <a href="#">Sign up</a></p>
  </div>
</div>

CSS Styling

Style your component using the following CSS:

.animated-login-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #0f172a;
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
}
.background-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: float 10s infinite alternate ease-in-out;
}
.shape-1 {
  width: 300px; height: 300px;
  background: #3b82f6;
  top: -100px; left: -100px;
}
.shape-2 {
  width: 400px; height: 400px;
  background: #8b5cf6;
  bottom: -150px; right: -100px;
  animation-delay: -5s;
}
.shape-3 {
  width: 200px; height: 200px;
  background: #ec4899;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -2s;
}
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 50px) scale(1.1); }
}
.login-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  opacity: 0;
  animation: slideUp 0.8s ease forwards;
}
@keyframes slideUp {
  to { transform: translateY(0); opacity: 1; }
}
.login-header h2 {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
}
.login-header p {
  color: #94a3b8;
  margin: 0 0 30px 0;
  font-size: 15px;
}
.input-group {
  position: relative;
  margin-bottom: 25px;
}
.input-group input {
  width: 100%;
  padding: 15px 15px 15px 5px;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: all 0.3s;
}
.input-group label {
  position: absolute;
  top: 15px;
  left: 5px;
  color: #94a3b8;
  font-size: 16px;
  pointer-events: none;
  transition: 0.3s ease all;
}
.input-group input:focus ~ label,
.input-group input:valid ~ label {
  top: -10px;
  font-size: 12px;
  color: #3b82f6;
}
.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3b82f6;
  transition: 0.4s;
}
.input-group input:focus ~ .focus-border,
.input-group input:valid ~ .focus-border {
  width: 100%;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
}
.remember-me input { accent-color: #3b82f6; }
.forgot-password {
  color: #3b82f6;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s;
}
.forgot-password:hover { color: #60a5fa; }
.login-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}
.signup-link {
  text-align: center;
  margin-top: 25px;
  color: #94a3b8;
  font-size: 14px;
}
.signup-link a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}
.signup-link a:hover { color: #3b82f6; }

JavaScript Logic (if applicable)

For dynamic behavior, you can use the following JavaScript snippet:

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('animated-form');
    if(form) {
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const btn = form.querySelector('.login-btn');
            const originalText = btn.textContent;
            btn.textContent = 'Signing In...';
            btn.style.opacity = '0.8';
            
            setTimeout(() => {
                btn.textContent = 'Success!';
                btn.style.background = '#10b981';
                btn.style.boxShadow = '0 4px 15px rgba(16, 185, 129, 0.4)';
                
                setTimeout(() => {
                    btn.textContent = originalText;
                    btn.style.background = '';
                    btn.style.boxShadow = '';
                    btn.style.opacity = '1';
                    form.reset();
                }, 2000);
            }, 1500);
        });
    }
});

Feel free to customize this code for your own projects!