•

November 10, 2024

5 min read

Modern Login Form with HTML and CSS

Learn how to create a modern login page with responsive design, social authentication, and security best practices. Perfect for web developers and UI designers. Creating an effective login page is crucial for user experience and security. In this guide, we'll explore how to build a modern, user-friendly login interface that follows current design trends and best practices.

The Evolution of Login Design

Modern login pages have evolved from simple forms to sophisticated interfaces that balance security, accessibility, and user experience. Today's login pages must work across devices while maintaining a professional appearance and robust functionality.

Key Design Elements

Clean Visual Hierarchy

The login page implements a clear visual hierarchy with:

Welcoming header text
Clearly labeled input fields
Prominent call-to-action button
Alternative login options
Easy access to account creation

Thoughtful Color Scheme

The color palette uses:

Indigo as the primary color for trust and professionalism
Subtle gradients for visual interest
White space for clarity and focus
Strategic contrast for accessibility

User-Friendly Features

Email and Password Fields

Clear input labels
Helpful placeholder text
Visual feedback on focus
Error state handling

Authentication Options

"Remember me" checkbox
Forgot password link
Social login alternatives
Sign-up option for new users

Mobile Optimization

The design adapts seamlessly to mobile devices through:
Flexible container sizing
Responsive padding and margins
Stack layout for social buttons
Touch-friendly input areas
Proper viewport meta tags

Security Best Practices

The login page incorporates several security features:

Required field validation
Secure password input
Clear error messaging
Protected form submission
Social authentication options

Performance Optimization

Performance considerations include:
Minimal external dependencies
Efficient CSS variables
Optimized transitions
Lightweight animations
Strategic media queries

A well-designed login page is essential for user engagement and security. By implementing these modern design patterns and best practices, you can create a login experience that is both secure and user-friendly.

Source Code

Copy the source code provided below and set up your project files accordingly. First, create a file named index.html and paste the HTML code into it. Next, create a file called styles.css and insert the CSS code there. This structure organizes your project into separate files for HTML and CSS making it easier to manage and maintain your code.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modern Login</title>
  </head>
  <body>
    <div class="login-container">
      <div class="login-header">
        <h1>Welcome back</h1>
        <p>Please enter your credentials to login</p>
      </div>

      <form>
        <div class="form-group">
          <label for="email" class="form-label">Email address</label>
          <input
            type="email"
            id="email"
            class="form-input"
            placeholder="name@company.com"
            required
          />
        </div>

        <div class="form-group">
          <label for="password" class="form-label">Password</label>
          <input
            type="password"
            id="password"
            class="form-input"
            placeholder="Enter your password"
            required
          />
        </div>

        <div class="remember-forgot">
          <div class="remember-me">
            <input type="checkbox" id="remember" class="checkbox-input" />
            <label for="remember" class="checkbox-label">Remember me</label>
          </div>
          <a href="#" class="forgot-password">Forgot password?</a>
        </div>

        <button type="submit" class="login-button">Sign in</button>

        <div class="social-login">
          <div class="social-label">
            <span>Or continue with</span>
          </div>
          <div class="social-buttons">
            <button type="button" class="social-button">Google</button>
            <button type="button" class="social-button">GitHub</button>
          </div>
        </div>

        <div class="signup-link">
          Don't have an account? <a href="#">Sign up</a>
        </div>
      </form>
    </div>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, sans-serif;
}

:root {
  --primary-color: #4f46e5;
  --primary-dark: #4338ca;
  --secondary-color: #9333ea;
  --background-color: #f5f7ff;
  --text-color: #1f2937;
  --text-light: #6b7280;
  --error-color: #ef4444;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--background-color), #85a0a7);
  padding: 2rem;
}

.login-container {
  background: white;
  padding: 2.5rem;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 450px;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h1 {
  color: var(--text-color);
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.login-header p {
  color: var(--text-light);
  font-size: 0.975rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--text-color);
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-input::placeholder {
  color: #9ca3af;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-input {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

.checkbox-label {
  color: var(--text-light);
  font-size: 0.875rem;
}

.forgot-password {
  color: var(--primary-color);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: var(--primary-dark);
}

.login-button {
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-button:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.login-button:active {
  transform: translateY(0);
}

.social-login {
  margin-top: 2rem;
  text-align: center;
}

.social-label {
  display: flex;
  align-items: center;
  color: var(--text-light);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.social-label::before,
.social-label::after {
  content: "";
  flex: 1;
  border-top: 1px solid #e5e7eb;
}

.social-label span {
  padding: 0 1rem;
}

.social-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-button {
  padding: 0.75rem 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: white;
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social-button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.signup-link {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-light);
  font-size: 0.875rem;
}

.signup-link a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.signup-link a:hover {
  color: var(--primary-dark);
}

@media (max-width: 480px) {
  .login-container {
    padding: 2rem;
  }

  .social-buttons {
    flex-direction: column;
  }

  .social-button {
    width: 100%;
    justify-content: center;
  }
}

/* Error state styles */
.form-input.error {
  border-color: var(--error-color);
}

.error-message {
  color: var(--error-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

CodingVox

Developer

Get More Tutorials Like This

Join 1,000+ developers getting weekly web development tips and code snippets

Share this article

Found this helpful? Share it with others!

Building a Modern Responsive Navigation Bar

Finance Dashboard Design with HTML, CSS, and Chart.js

•