Creating a Modern Animated Login Form with HTML & CSS
In today's tutorial, we'll walk you through creating a stylish and responsive animated login form using just HTML and CSS. This modern login form features smooth animations, a clean floating label effect for the input fields, and a contemporary design that can easily be integrated into any web project.
Overview
The login form is designed to be simple yet visually appealing. It uses CSS animations to add a fade-in effect when the form loads, and floating labels that move gracefully as users interact with the input fields. This design not only enhances user experience but also provides a sleek, modern look.
Code Example
Below is the complete HTML and CSS code for the animated login form. You can copy and paste this code into your project to see it in action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Login Form</title>
<style>
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #74abe2, #5563de);
font-family: Arial, sans-serif;
}
.login-container {
background: #fff;
padding: 2rem;
border-radius: 10px;
width: 350px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: fadeInUp 0.8s ease-out;
}
.login-container h2 {
text-align: center;
margin-bottom: 1.5rem;
color: #333;
}
.input-field {
position: relative;
margin-bottom: 1.5rem;
}
.input-field input {
width: 100%;
padding: 10px;
background: #f0f0f0;
border: none;
outline: none;
border-radius: 5px;
font-size: 1rem;
}
.input-field label {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #777;
pointer-events: none;
transition: 0.3s;
}
.input-field input:focus + label,
.input-field input:valid + label {
top: -10px;
background: #fff;
padding: 0 5px;
color: #5563de;
font-size: 0.8rem;
}
button {
width: 100%;
padding: 10px;
background: #5563de;
border: none;
outline: none;
border-radius: 5px;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #4450b5;
}
/* Animation for form entrance */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="#" method="post">
<div class="input-field">
<input type="text" id="username" required />
<label for="username">Username</label>
</div>
<div class="input-field">
<input type="password" id="password" required />
<label for="password">Password</label>
</div>
<button type="submit">Sign In</button>
</form>
</div>
</body>
</html>
Conclusion
This example demonstrates how you can combine HTML and CSS to create engaging user interfaces with minimal code. Experiment with different styles, animations, and layouts to make the login form unique and fit the overall design of your website.
If you have any questions or suggestions, feel free to leave a comment below!