Table of Contents
Animated Login Form using HTML & CSS is a great way to add interactivity and visual appeal to your website. By applying CSS animations to a simple login form, you can make it engaging and visually appealing, enhancing user experience. In this guide, we’ll walk through how to create a stylish animated login form using only HTML and CSS—perfect for web projects that require a clean, modern login interface.
What is an Animated Login Form?
An animated login form uses CSS to create smooth visual transitions, interactive effects, or moving backgrounds. These elements are not just visually appealing; they can also improve user interaction, making the form look more engaging and welcoming.
Setting Up the HTML Structure
The first part of any web design project is setting up the HTML structure. Here, we’ll create a simple login form with fields for username and password, a “Login” button, and options for “Forgot Password” and “Sign Up.”
This form structure provides the foundation for the CSS animations we’ll add in the next section.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Animated Login Form</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box"> <form> <h2>Sign in</h2> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> <input type="submit" value="Login"> <div class="group"> <a href="#">Forget Password</a> <a href="#">Sign up</a> </div> </form> </div> </body> </html>
This HTML code includes:
- Title & Head Section: Setting up the document language, title, and linking to the CSS file.
- Form Section: HTML form elements with placeholders and input types for username, password, and the submit button.
- Links: Options for forgotten password recovery and sign-up.
Styling the Login Form with CSS
Next, let’s style our login form. This CSS code will add background animations, gradient effects, and a sleek appearance to the form.
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #25252b;
}
.box
{
position: relative;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background: repeating-conic-gradient(from var(--a),#ff2770 0%, #ff2770 5%, transparent 5%, transparent 35%, #ff2770 50%);
animation: animate 4s linear infinite;
border-radius: 20px;
}
@property --a
{
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@keyframes animate
{
0%
{
--a: 0deg;
}
100%
{
--a: 360deg;
}
}
.box::before
{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: repeating-conic-gradient(from var(--a),#45f3ff 0%, #45f3ff 5%, transparent 5%, transparent 35%, #45f3ff 50%);
animation: animate 4s linear infinite;
animation-delay: -1s;
border-radius: 20px;
}
.box::after
{
content: '';
position: absolute;
inset: 8px;
background: #2d2d39;
border-radius: 15px;
border: 8px solid #25252b;
}
form
{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
z-index: 1000;
padding: 0 40px;
}
h2
{
color: #fff;
font-weight: 600;
}
input
{
position: relative;
width: 85%;
background: rgba(255,255,255,0.1);
padding: 10px 15px;
border: none;
outline: none;
border-radius: 5px;
color: #fff;
font-size: 1em;
letter-spacing: 0.05em;
}
::placeholder
{
color: rgba(255,255,255,0.5);
}
input[type="submit"]
{
font-weight: 600;
transition: 0.5s;
background: #fff;
color: #2d2d39;
cursor: pointer;
}
input[type="submit"]:hover
{
background: #ff2770;
color: #fff;
}
.group
{
width: 85%;
display: flex;
justify-content: space-between;
}
.group a
{
color: rgba(255,255,255,0.75);
text-decoration: none;
}
.group a:last-child
{
color: #45f3ff;
font-weight: 500;
}
CSS Explanation
- Global Reset: Using
*to reset margins and paddings, and setting the font to Poppins for a clean, modern look. - Body Styling: The Flexbox layout will center the form in the viewport with a dark background color.
- Animated Box:
- Box & Keyframe Animation: The
@keyframes animatecreates a rotating animation effect. - Background Gradient:
repeating-conic-gradientadds a rotating background effect to enhance the visual appeal.
- Box & Keyframe Animation: The
- Form Styling: The form is positioned at the center with input fields, buttons, and links styled with contrasting colors and a subtle glow effect for the active button state.
- Input Fields & Button: Rounded edges, white placeholder text, and hover effects add to the form’s elegance.
Making the Form Interactive
CSS animations give life to our login form, but they don’t add functionality. JavaScript can enhance this form further by adding validation and interactive effects upon form submission, but for the purposes of this tutorial, CSS-only is enough to create an attractive, animated login form.
Conclusion
Creating an animated login form using just HTML and CSS is not only achievable but can be incredibly rewarding. With a bit of creativity and an understanding of CSS animations, you can build engaging forms that enhance the user experience while also adding a touch of sophistication to your website.
Get the Complete Source Code
Ready to build this animated login form on your own website?
Download the complete source code and see it in action!
