Provider Shortcut Login UI

A provider shortcut login UI built with pure HTML and CSS that displays quick access authentication buttons for external identity providers. It enhances streamlined sign-in visibility and user convenience without requiring JavaScript.

Usage

Use this component when interfaces require third party login options, such as SaaS platforms, web applications, or membership systems offering alternative authentication methods.

Implementation

The layout uses a stacked button or tile based structure to present provider options clearly. CSS manages alignment, spacing, hover states, and responsive stacking behavior across devices.

HTML

<section class="login-provider">
  <button class="login-provider__primary">Continue with Provider</button>
  <span class="login-provider__divider">or</span>
  <button class="login-provider__secondary">Email Login</button>
</section>

<section class="login-provider">
  <button class="login-provider__primary">Continue with Provider</button>
  <span class="login-provider__divider">or</span>
  <button class="login-provider__secondary">Email Login</button>
</section>

CSS

.login-provider {
  width: 200px;
  padding: 0.9rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  display: grid;
  gap: 0.45rem;
  text-align: center;
}

.login-provider__primary {
  padding: 0.45rem;
  border-radius: 999px;
  border: none;
  background: #22c55e;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.login-provider__divider {
  font-size: 11px;
  color: #6b7280;
}

.login-provider__secondary {
  padding: 0.4rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .login-provider {
    background: #020617;
  }

  .login-provider__divider {
    color: #9ca3af;
  }

  .login-provider__secondary {
    border-color: #374151;
    color: #e5e7eb;
  }
}

.login-provider {
  width: 200px;
  padding: 0.9rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  display: grid;
  gap: 0.45rem;
  text-align: center;
}

.login-provider__primary {
  padding: 0.45rem;
  border-radius: 999px;
  border: none;
  background: #22c55e;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.login-provider__divider {
  font-size: 11px;
  color: #6b7280;
}

.login-provider__secondary {
  padding: 0.4rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .login-provider {
    background: #020617;
  }

  .login-provider__divider {
    color: #9ca3af;
  }

  .login-provider__secondary {
    border-color: #374151;
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Designed for external provider login options
• Enhances authentication shortcut clarity
• Fully responsive across breakpoints
• Suitable for SaaS and application login pages
• Easy to customize provider button styling

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.