Mode Switch Login Panel

A mode switch login panel built with pure HTML and CSS that allows users to toggle between authentication states such as sign-in and sign-up. It enhances form switching clarity and layout efficiency without requiring JavaScript.

Usage

Use this component when interfaces require multiple authentication modes, such as login/register toggles, email/password versus OTP forms, or user/admin access panels.

Implementation

The switching behavior is handled using CSS state selectors and conditional visibility control, allowing different form panels to appear within the same container. Responsive styling ensures proper stacking and spacing across devices.

HTML

<section class="login-mode">
  <div class="login-mode__tabs">
    <button class="is-active">Password</button>
    <button>SSO</button>
  </div>
  <button class="login-mode__action">Continue</button>
</section>

<section class="login-mode">
  <div class="login-mode__tabs">
    <button class="is-active">Password</button>
    <button>SSO</button>
  </div>
  <button class="login-mode__action">Continue</button>
</section>

CSS

.login-mode {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: #f9fafb;
  display: grid;
  gap: 0.5rem;
  text-align: center;
}

.login-mode__tabs {
  display: flex;
  gap: 0.25rem;
}

.login-mode__tabs button {
  flex: 1;
  border: none;
  background: #ffffff;
  padding: 0.35rem 0;
  border-radius: 999px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  transition: background 150ms ease;
}

.login-mode__tabs button.is-active {
  background: #6366f1;
  color: #ffffff;
  font-weight: 600;
}

.login-mode__action {
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
}

@media (prefers-color-scheme: dark) {
  .login-mode {
    background: #020617;
  }
  .login-mode__tabs button {
    background: #020617;
    color: #9ca3af;
  }
}

.login-mode {
  width: 200px;
  padding: 0.75rem;
  border-radius: 16px;
  background: #f9fafb;
  display: grid;
  gap: 0.5rem;
  text-align: center;
}

.login-mode__tabs {
  display: flex;
  gap: 0.25rem;
}

.login-mode__tabs button {
  flex: 1;
  border: none;
  background: #ffffff;
  padding: 0.35rem 0;
  border-radius: 999px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  transition: background 150ms ease;
}

.login-mode__tabs button.is-active {
  background: #6366f1;
  color: #ffffff;
  font-weight: 600;
}

.login-mode__action {
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
}

@media (prefers-color-scheme: dark) {
  .login-mode {
    background: #020617;
  }
  .login-mode__tabs button {
    background: #020617;
    color: #9ca3af;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Supports multiple authentication modes
• Enhances form state transition clarity
• Fully responsive across breakpoints
• Suitable for SaaS and dashboard login pages
• Easy to customize toggle styling and spacing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.