HTML / Markup Public

Animated Login Form

A modern login form with email and password fields, glowing Sign In button, and smooth hover animations.

HTML / Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Animated Login Form</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
  * {
    box-sizing: border-box;
  }
  body {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    font-family: 'Nunito', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .login-container {
    background: #ffffffcc;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(42, 82, 152, 0.4);
    width: 320px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1e3c72;
    font-weight: 700;
  }
  label {
    font-weight: 600;
    color: #2a5298;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
  }
  input[type=email], input[type=password] {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  input[type=email]:focus, input[type=password]:focus {
    outline: none;
    border-color: #2a5298;
    box-shadow: 0 0 8px 2px rgba(42, 82, 152, 0.4);
  }
  .btn-signin {
    background: linear-gradient(45deg, #5a8dee, #1e3c72);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.75rem 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.4s ease, transform 0.3s ease;
    box-shadow: 0 0 10px #5a8dee;
    user-select: none;
  }
  .btn-signin:hover {
    box-shadow: 0 0 20px 6px #5a8dee, 0 0 30px 10px #1e3c72;
    transform: scale(1.05);
  }
  .btn-signin:active {
    transform: scale(0.98);
  }
  .error-message {
    color: #d9534f;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    display: none;
  }
</style>
</head>
<body>
  <div class="login-container">
    <h2>Sign In</h2>
    <form id="loginForm" novalidate>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="you@example.com" required />
      <label for="password">Password</label>
      <input type="password" id="password" name="password" placeholder="Enter your password" required minlength="6" />
      <div class="error-message" id="errorMsg"></div>
      <button type="submit" class="btn-signin">Sign In</button>
    </form>
  </div>
  <script>
    const form = document.getElementById('loginForm');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const errorMsg = document.getElementById('errorMsg');

    form.addEventListener('submit', e => {
      e.preventDefault();
      errorMsg.style.display = 'none';
      const email = emailInput.value.trim();
      const password = passwordInput.value.trim();
      if (!validateEmail(email)) {
        showError('Please enter a valid email address.');
        return;
      }
      if (password.length < 6) {
        showError('Password must be at least 6 characters long.');
        return;
      }
      alert('Form submitted successfully!');
      form.reset();
    });

    function validateEmail(email) {
      const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\\.,;:\s@\"]+\.)+[^<>()[\]\\.,;:\s@\"]{2,})$/i;
      return re.test(email.toLowerCase());
    }

    function showError(message) {
      errorMsg.textContent = message;
      errorMsg.style.display = 'block';
    }
  </script>
</body>
</html>

Snippet actions

Geri

Updated: 2026-08-17 14:27

Public snippets

Forks