Category · Authentication Difficulty Level · Intermediate Published on · August 22, 2025
Animated Login Form

Modern login form with smooth animations, validation, and social login options, perfect for user authentication.
#login #form #authentication #animation #validation
Responsive Design
Yes
Dark Mode Support
lines
629
Browser Compatibility
Chrome · Firefox · Safari · Edge
Live Preview

Interact with the component without leaving the page.
400px
Overview

Modern login form with smooth animations, validation, and social login options, perfect for user authentication.
How to use

Copy the HTML markup into your page.
Paste the CSS into your stylesheet and ensure the selectors match your markup.
Paste the JavaScript and load it after the markup.
Adjust spacing, colors, and text to match your design system.
Customization tips

Rename class names to avoid collisions with your existing CSS.
Replace hard-coded colors with CSS variables for theming.
Verify the layout at 320px, 768px, and 1024px widths.
HTML
lines
CSS
408
lines
JavaScript
155
lines
                <div class="login-form-container">
  <div class="login-form-demo">
    <div class="form-wrapper">
      <div class="form-header">
        <h2>Welcome Back</h2>
        <p>Sign in to your account</p>
      </div>
      
      <form class="login-form" id="loginForm">
        <div class="form-group">
          <label for="email">Email Address</label>
          <div class="input-wrapper">
            <input type="email" id="email" name="email" required placeholder="Enter your email">
            <div class="input-icon">✉️</div>
          </div>
        </div>
        
        <div class="form-group">
          <label for="password">Password</label>
          <div class="input-wrapper">
            <input type="password" id="password" name="password" required placeholder="Enter your password">
            <div class="input-icon">🔒</div>
            <button type="button" class="toggle-password" id="togglePassword">👁️</button>
          </div>
        </div>
        
        <div class="form-options">
          <label class="checkbox-label">
            <input type="checkbox" id="rememberMe" name="rememberMe">
            <span class="checkmark"></span>
            Remember me
          </label>
          <a href="#" class="forgot-password">Forgot password?</a>
        </div>
        
        <button type="submit" class="btn btn-primary" id="loginBtn">
          <span class="btn-text">Sign In</span>
          <span class="btn-spinner" id="loginSpinner"></span>
        </button>
        
        <div class="divider">
          <span>or continue with</span>
        </div>
        
        <div class="social-login">
          <button type="button" class="social-btn google">
            <span class="social-icon">G</span>
            <span class="social-text">Google</span>
          </button>
          <button type="button" class="social-btn facebook">
            <span class="social-icon">f</span>
            <span class="social-text">Facebook</span>
          </button>
          <button type="button" class="social-btn apple">
            <span class="social-icon">🍎</span>
            <span class="social-text">Apple</span>
          </button>
        </div>
        
        <div class="signup-link">
          Don't have an account? <a href="#">Sign up</a>
        </div>
      </form>
    </div>
  </div>
</div>

              

                .login-form-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  padding: 40px 20px;
  border-radius: 20px;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.login-form-demo {
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.form-wrapper {
  animation: slideInUp 0.6s ease-out;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.form-header h2 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 2rem;
  font-weight: 700;
}

.form-header p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  animation: fadeIn 0.6s ease-out;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

.input-wrapper {
  position: relative;
}

.input-wrapper input {
  width: 100%;
  padding: 15px 50px 15px 50px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.input-wrapper input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-wrapper input.valid {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.05);
}

.input-wrapper input.invalid {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.05);
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #999;
}

.input-wrapper input:focus + .input-icon {
  color: #667eea;
}

.input-wrapper input.valid + .input-icon {
  color: #27ae60;
}

.input-wrapper input.invalid + .input-icon {
  color: #e74c3c;
}

.toggle-password {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-password:hover {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #666;
}

.checkbox-label input {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #e2e8f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checkbox-label input:checked + .checkmark {
  background: #667eea;
  border-color: #667eea;
}

.checkbox-label input:checked + .checkmark::after {
  content: '✓';
  color: white;
  font-size: 12px;
}

.forgot-password {
  color: #667eea;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.forgot-password:hover {
  color: #5a6fd8;
  text-decoration: underline;
}

.btn {
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-text {
  transition: opacity 0.3s ease;
}

.btn.loading .btn-text {
  opacity: 0;
}

.btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: spin 1s linear infinite;
}

.btn.loading .btn-spinner {
  opacity: 1;
}

.divider {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0;
}

.divider span {
  color: #999;
  font-size: 0.9rem;
  white-space: nowrap;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.social-login {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.social-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  font-weight: 600;
}

.social-btn:hover {
  transform: translateY(-2px);
  border-color: #667eea;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.social-icon {
  font-size: 1.2rem;
}

.social-text {
  color: #333;
  font-size: 0.9rem;
}

.social-btn.google:hover {
  border-color: #db4437;
}

.social-btn.facebook:hover {
  border-color: #3b5998;
}

.social-btn.apple:hover {
  border-color: #000000;
}

.signup-link {
  text-align: center;
  color: #666;
  font-size: 0.95rem;
}

.signup-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.signup-link a:hover {
  color: #5a6fd8;
  text-decoration: underline;
}@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}@media (max-width: 768px) {
  .login-form-container {
    padding: 30px 15px;
  }
  
  .login-form-demo {
    padding: 25px;
  }
  
  .form-header h2 {
    font-size: 1.7rem;
  }
  
  .input-wrapper input {
    padding: 12px 45px 12px 45px;
  }
  
  .input-icon,
  .toggle-password {
    font-size: 1rem;
  }
  
  .social-login {
    flex-direction: column;
    gap: 10px;
  }
  
  .social-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .forgot-password {
    align-self: flex-end;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {

  const loginForm = document.getElementById('loginForm');
  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  const togglePassword = document.getElementById('togglePassword');
  const loginBtn = document.getElementById('loginBtn');
  const loginSpinner = document.getElementById('loginSpinner');
  const googleBtn = document.querySelector('.social-btn.google');
  const facebookBtn = document.querySelector('.social-btn.facebook');
  const appleBtn = document.querySelector('.social-btn.apple');
  const forgotPassword = document.querySelector('.forgot-password');

  togglePassword.addEventListener('click', function() {
    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordInput.setAttribute('type', type);
    this.textContent = type === 'password' ? '👁️' : '🔒';
  });

  emailInput.addEventListener('input', validateEmail);
  passwordInput.addEventListener('input', validatePassword);

  loginForm.addEventListener('submit', function(e) {
    e.preventDefault();

    const isEmailValid = validateEmail();
    const isPasswordValid = validatePassword();
    
    if (isEmailValid && isPasswordValid) {

      loginBtn.classList.add('loading');
      loginBtn.disabled = true;

      setTimeout(() => {

        const email = emailInput.value;
        const password = passwordInput.value;

        if (email === 'demo@example.com' && password === 'demo123') {
          alert('Login successful! Welcome back.');


        } else {
          alert('Invalid credentials. Please try again.');

          loginForm.classList.add('shake');
          setTimeout(() => {
            loginForm.classList.remove('shake');
          }, 500);
        }

        loginBtn.classList.remove('loading');
        loginBtn.disabled = false;
      }, 2000);
    } else {

      if (!isEmailValid) {
        emailInput.classList.add('shake');
        setTimeout(() => {
          emailInput.classList.remove('shake');
        }, 500);
      }
      
      if (!isPasswordValid) {
        passwordInput.classList.add('shake');
        setTimeout(() => {
          passwordInput.classList.remove('shake');
        }, 500);
      }
    }
  });

  function validateEmail() {
    const email = emailInput.value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+\$/;
    
    if (email === '') {
      emailInput.classList.remove('valid');
      emailInput.classList.add('invalid');
      return false;
    } else if (!emailRegex.test(email)) {
      emailInput.classList.remove('valid');
      emailInput.classList.add('invalid');
      return false;
    } else {
      emailInput.classList.remove('invalid');
      emailInput.classList.add('valid');
      return true;
    }
  }

  function validatePassword() {
    const password = passwordInput.value;
    
    if (password === '') {
      passwordInput.classList.remove('valid');
      passwordInput.classList.add('invalid');
      return false;
    } else if (password.length < 6) {
      passwordInput.classList.remove('valid');
      passwordInput.classList.add('invalid');
      return false;
    } else {
      passwordInput.classList.remove('invalid');
      passwordInput.classList.add('valid');
      return true;
    }
  }

  googleBtn.addEventListener('click', function() {
    simulateSocialLogin('Google');
  });
  
  facebookBtn.addEventListener('click', function() {
    simulateSocialLogin('Facebook');
  });
  
  appleBtn.addEventListener('click', function() {
    simulateSocialLogin('Apple');
  });

  function simulateSocialLogin(provider) {
    loginBtn.classList.add('loading');
    loginBtn.disabled = true;
    
    setTimeout(() => {
      alert(`Logging in with \${provider}...`);
      loginBtn.classList.remove('loading');
      loginBtn.disabled = false;

    }, 1500);
  }

  forgotPassword.addEventListener('click', function(e) {
    e.preventDefault();
    alert('Password reset functionality would be implemented here.');

  });

  const signupLink = document.querySelector('.signup-link a');
  signupLink.addEventListener('click', function(e) {
    e.preventDefault();
    alert('Sign up page would open here.');

  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {

      if (document.activeElement === emailInput || document.activeElement === passwordInput) {
        loginForm.dispatchEvent(new Event('submit'));
      }
    }
  });
});

              
Browser Compatibility

Chrome
>= 50
Firefox
>= 45
Safari
>= 10
Edge
>= 15
Markdown to HTML Converter

Privacy Policy Generator

Animated Login Form

Live Preview

Overview

How to use

Customization tips

Browser Compatibility

Related Code Snippets

Animated Back to Top Button

Animated Chat Interface

Animated Countdown Timer

Explore template packs
