HTML / Markup
Public
Animated Modern Login Form
A sleek, animated login form with email and password fields, glowing Sign In button, and smooth hover effects.
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=Poppins:wght@400;600&display=swap');
* {
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #667eea, #764ba2);
font-family: 'Poppins', sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.login-container {
background: #1f1f38;
padding: 40px 50px;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0,0,0,0.5);
width: 350px;
}
.login-container h2 {
color: #fff;
text-align: center;
margin-bottom: 30px;
font-weight: 600;
letter-spacing: 1.2px;
}
.input-group {
position: relative;
margin-bottom: 30px;
}
.input-group input {
width: 100%;
padding: 14px 18px;
border-radius: 8px;
border: none;
background: #2c2c52;
color: #eee;
font-size: 16px;
outline: none;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.input-group input::placeholder {
color: #999;
}
.input-group input:focus {
background: #3a3a6e;
box-shadow: 0 0 8px #6874ee;
}
.btn-signin {
width: 100%;
padding: 16px 0;
border: none;
border-radius: 50px;
background: #6874ee;
font-size: 18px;
font-weight: 600;
color: #fff;
cursor: pointer;
box-shadow:
0 0 8px #6874ee,
0 0 20px #6874ee,
0 0 40px #6874ee;
transition: all 0.4s ease;
}
.btn-signin:hover {
background: #5a65d9;
box-shadow:
0 0 12px #8598ff,
0 0 25px #8598ff,
0 0 50px #8598ff;
}
.btn-signin:active {
transform: scale(0.98);
}
.error-msg {
color: #ff7676;
font-size: 14px;
margin-top: -20px;
margin-bottom: 20px;
display: none;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Sign In</h2>
<form id="loginForm" novalidate>
<div class="input-group">
<input type="email" id="email" name="email" placeholder="Email" required />
<div class="error-msg" id="emailError">Please enter a valid email.</div>
</div>
<div class="input-group">
<input type="password" id="password" name="password" placeholder="Password" required minlength="6" />
<div class="error-msg" id="passwordError">Password must be at least 6 characters.</div>
</div>
<button class="btn-signin" type="submit">Sign In</button>
</form>
</div>
<script>
const form = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
form.addEventListener('submit', function(e) {
e.preventDefault();
let valid = true;
// Validate email
const emailValue = emailInput.value.trim();
if (!emailValue || !/^\S+@\S+\.\S+$/.test(emailValue)) {
emailError.style.display = 'block';
valid = false;
} else {
emailError.style.display = 'none';
}
// Validate password
const passwordValue = passwordInput.value.trim();
if (!passwordValue || passwordValue.length < 6) {
passwordError.style.display = 'block';
valid = false;
} else {
passwordError.style.display = 'none';
}
if (valid) {
alert('Form submitted successfully!');
form.reset();
}
});
</script>
</body>
</html>