Creating a Modern Login Form with HTML & CSS

Himmat Kumar Mar 4, 2025, 6:27 AM
HTML
Views 253
Blog Thumbnail

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!

Comments

Please login to leave a comment.

No comments yet.

Related Posts

getting-started-with-html-setup-edit-run-code-in-browser
354 viewsHTML
Himmat Kumar Jul 25, 2024, 1:09 PM

Getting Started with HTML: Setup, Edit, and Run Your Co...

what-is-html-full-explanation
486 viewsHTML
Himmat Kumar Oct 13, 2023, 11:40 PM

What is HTML? Full Explanation and Guide

glassmorphism-login-form
247 viewsHTML
Himmat Kumar Mar 4, 2025, 1:15 AM

Glassmorphism Login Form: A Modern Design Tutorial

semantic-html-complete-guide
1385 viewsHTML
Himmat Regar Jun 9, 2025, 5:37 PM

Semantic HTML Explained: Why <header>-<footer> & Friend...

html-headings-guide
245 viewsHTML
Himmat Kumar Aug 18, 2024, 11:31 PM

Understanding HTML Headings: A Simple Guide

responsive-meta-seo-friendly-markup-2025
481 viewsHTML
Himmat Regar Jun 23, 2025, 4:23 PM

Mastering Responsive Meta & SEO-Friendly Markup in 2025

hyperlinks-and-media-embedding-2025
535 viewsHTML
Himmat Regar Jun 23, 2025, 4:37 PM

Hyperlinks & Media: Embedding Content the Right Way in ...

html-seo-faq-2025
488 viewsHTML
Himmat Regar Jun 23, 2025, 4:41 PM

HTML & SEO FAQ 2025: Answers to the Web’s Most-Asked Qu...

html-css-js-online-compiler
380 viewsHTML
Himmat Regar May 30, 2025, 6:54 AM

HTML CSS JS Online Compiler – Best Free Tools to Code a...

html-performance-tricks-2025
1136 viewsHTML
Himmat Regar Jun 2, 2025, 7:02 PM

HTML Performance Tricks 2025 – Preload, Async/Defer, Cr...