webdevpuneet.com

Related Snippets

91 in Buttons category
1–6 of 60

AI Mode Glow Button (Google Search Style)

Snap.svg Morphing Icon Button

Popmotion Spring Toggle Switch

Bootstrap Rate-Limited Action Button

Bootstrap HTTP Status Badge

Bootstrap Copy-to-Clipboard Feedback

Social Login Buttons — OAuth Sign In HTML CSS JS

Social Login Buttons · Buttons · Plain HTML, CSS & JS · Live preview

CategoryButtons
TagsSVGCSS AnimationAuthenticationMicro-Interactions

Copy & paste

Source Code

<div class="slb-card">
  <h2>Welcome back</h2>
  <p class="slb-sub">Sign in to continue to Acme</p>

  <div class="slb-list">
    <button type="button" class="slb-btn" data-provider="Google">
      <svg class="slb-ico" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/><path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-2 1.5-4.6 2.4-7.2 2.4-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C39.9 35.7 44 30.4 44 24c0-1.3-.1-2.3-.4-3.5z"/></svg>
      Continue with Google
    </button>
    <button type="button" class="slb-btn slb-dark" data-provider="Apple">
      <svg class="slb-ico" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.04c-.03-2.5 2.04-3.7 2.13-3.76-1.16-1.7-2.97-1.93-3.62-1.96-1.54-.16-3 .9-3.78.9-.78 0-1.97-.88-3.24-.86-1.67.03-3.21.97-4.07 2.46-1.74 3.02-.45 7.5 1.25 9.95.83 1.2 1.82 2.55 3.12 2.5 1.25-.05 1.72-.81 3.24-.81 1.51 0 1.94.81 3.26.78 1.35-.02 2.2-1.22 3.03-2.43.95-1.4 1.34-2.75 1.36-2.82-.03-.01-2.61-1-2.64-3.97zM14.6 4.59c.69-.84 1.16-2 1.03-3.16-1 .04-2.2.66-2.92 1.5-.64.74-1.2 1.92-1.05 3.05 1.11.09 2.25-.56 2.94-1.39z"/></svg>
      Continue with Apple
    </button>
    <button type="button" class="slb-btn slb-dark" data-provider="GitHub">
      <svg class="slb-ico" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4.7 18.3 5 18.3 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"/></svg>
      Continue with GitHub
    </button>
  </div>

  <div class="slb-divider"><span>or</span></div>

  <button type="button" class="slb-email">Sign in with email</button>
  <p class="slb-terms">By continuing you agree to our <a href="#">Terms</a> &amp; <a href="#">Privacy Policy</a>.</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Brand-correct provider styling
Google on white with its color mark, Apple and GitHub dark with white logos — matching each sign-in brand guideline.
Inline SVG logos
Official-style logos as inline SVG — no image requests, crisp at any size, left-aligned with optically centered labels.
Per-button loading spinner
Clicking shows an immediate centered spinner and disables the button, preventing double-clicks during the redirect.
"Continue with" wording
The conversion-tested label that works for both new and returning users, unlike "Login" or "Sign up".
Email fallback
A clear divider and primary email button ensure social login is never the only option, for usability and accessibility.
Terms at the point of signup
A quiet terms-and-privacy line links consent right where account creation happens.
Delegated, data-driven handler
One listener reads data-provider, so adding a provider is a button plus its logo — no new logic.
Adaptive spinner color
The loading spinner is gray on light buttons and white on dark ones, staying visible on each.

About this UI Snippet

Social Login Buttons — Branded OAuth Sign-In with Loading States

Screenshot of the Social Login Buttons snippet rendered live

"Continue with Google" is now the fastest, most-used way people sign in — social login removes the password step entirely and can dramatically lift signup conversion. But the buttons have to look *right*: each provider has brand guidelines for its logo, colors, and wording, and a generic gray button erodes the trust the provider's brand is supposed to lend. This snippet builds a proper social-login button set in plain HTML, CSS, and vanilla JavaScript: official-style logos, correct light/dark treatments, a loading spinner per button, and an email fallback with a terms line.

Brand-correct buttons, not generic ones

Each provider gets its own treatment: Google on a white button with its multicolor "G" mark, Apple and GitHub on dark buttons with white logos — matching each company's sign-in brand guidelines, which exist precisely so the button is instantly recognizable. The logos are inline SVGs (no image requests, crisp at any size), absolutely positioned at the left so the label stays optically centered regardless of logo width. "Continue with [Provider]" is the recommended, conversion-tested wording — clearer than "Login" or "Sign up" because it works for both new and returning users without committing to either.

A loading state per button

OAuth flows involve a redirect or popup that takes a moment to start, so each button shows a spinner the instant it's clicked — its label fades to transparent and a border-spinner appears centered, with the button becoming non-interactive to prevent double-clicks. This immediate feedback is important: without it, a user who clicks and sees nothing happen for a second will click again, potentially opening two auth flows. The spinner color adapts to the button (gray on light, white on dark).

The email fallback and divider

Social login should never be the *only* option — some users don't have or won't use a Google/Apple/GitHub account, and some organizations block them. A clear "or" divider separates the social buttons from a primary "Sign in with email" button, so the email path is always available and visually distinct. This is both a usability and an accessibility requirement: forcing social-only login excludes a real segment of users.

Terms and privacy at the point of action

A small terms-and-privacy line sits below the buttons, because the moment of account creation is exactly where consent belongs — linking the terms here (rather than burying them) is both good practice and, in many jurisdictions, a legal expectation for the signup flow. It's styled as quiet supporting text so it informs without competing with the actions.

Where the real auth goes

The click handler is where you start the provider's OAuth flow — a redirect to your /auth/google endpoint, or a call to your auth SDK's signInWithPopup / signInWithRedirect. The demo simulates the redirect delay and logs the provider; swapping in real auth is a one-line change per provider. The provider name lives in a data-provider attribute so one delegated handler covers every button, and adding a provider (Microsoft, Facebook, X) is a new button plus its logo — no new logic.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA sign-in card renders with branded Google, Apple, and GitHub buttons, a divider, and an email option.
  2. 2
    Click a providerThe button shows a loading spinner and becomes non-interactive while the (simulated) OAuth flow starts.
  3. 3
    Note the brandingGoogle is light with its color mark; Apple and GitHub are dark with white logos — matching brand guidelines.
  4. 4
    See the email fallbackAn "or" divider separates the social buttons from a primary "Sign in with email" path.
  5. 5
    Add or remove providersDuplicate a button with a data-provider and its SVG logo, or remove one — the delegated handler covers all.
  6. 6
    Wire up real OAuthIn the handler, redirect to your auth endpoint (/auth/google) or call your SDK's signInWithPopup for the clicked provider.

Real-world uses

Common Use Cases

Sign-in and sign-up screens
The social options at the top of any auth screen — pair with an auth login card for the email form.
Onboarding flows
Reduce signup friction by letting new users start with one tap, before a password requirements checklist if they choose email.
Checkout guest-to-account
Offer fast account creation at checkout via a provider the shopper already uses.
App and SaaS login
Standard social SSO for product sign-in, complementing a magic link login as a passwordless option.
Developer tools
GitHub login is expected for dev-focused products; the same pattern adds GitLab or Google Workspace.
Learning OAuth button UX
A reference for brand-correct provider buttons and loading states — compare with social buttons for the share-button variant.

Got questions?

Frequently Asked Questions

In the click handler, start the provider's flow: redirect to your backend's OAuth route (window.location = '/auth/' + provider) which then redirects to the provider and back, or call your auth SDK directly — Firebase signInWithPopup(new GoogleAuthProvider()), Auth0 loginWithRedirect({ connection: 'google' }), Supabase signInWithOAuth({ provider: 'github' }). The data-provider attribute identifies which to start. Keep the loading state until the redirect/popup takes over.

Google, Apple, and others publish sign-in button guidelines (logo, colors, wording, spacing) and in some cases require compliance to use their login. Beyond policy, a brand-correct button is instantly recognizable, which is the entire value of social login — users trust the familiar Google or Apple button far more than a generic styled one, so adhering to the guidelines directly affects conversion.

Yes, always. Some users don't have or won't use a given provider, corporate policies sometimes block them, and relying solely on a third party for auth is a single point of failure. A clear email fallback (and ideally more than one provider) keeps signup accessible to everyone — excluding email-only users measurably shrinks your addressable signups.

Add a loading class on first click that sets pointer-events: none and shows a spinner, and bail out of the handler if the button is already loading (as this snippet does). The button stays disabled until the redirect or popup takes over, so a second click can't fire a duplicate flow — important since OAuth redirects have a perceptible delay.

In React, render the providers from an array with .map(), hold a loading provider id in useState, and call your auth SDK in the onClick; in Vue, use v-for with a loading ref; in Angular, use *ngFor and a service method. The branding is pure CSS/SVG that ports unchanged — only the loading state and the SDK call move into the framework.