Social login buttons are the standard entry point on almost every modern sign-up and login page. Offering Google, GitHub, and X (Twitter) OAuth alongside an email fallback (or a magic link) reduces friction — users choose the authentication method they trust and already have open. This snippet provides the complete UI for this pattern: three OAuth buttons, an "or" divider, an email input, and a primary CTA button.

The OAuth button styles

Google and other providers have strict visual identity guidelines for OAuth buttons. The generic .btn style uses a white background with a light border and dark text — appropriate for provider buttons where the provider logo (SVG) carries the brand identity. .btn.github and .btn.twitter use dark filled backgrounds as these providers expect dark button treatments. All buttons are full-width (justify-content: center) so they stack cleanly in the narrow card layout.

The OR divider

The .divider element uses display: flex; align-items: center; gap: 10px. The lines on either side are created with ::before and ::after pseudo-elements: content: ''; flex: 1; height: 1px; background: #e2e8f0. The flex: 1 makes both lines take equal space. This produces a horizontal rule with a centred "or" label — no extra HTML elements needed.

The email fallback

The email input uses the same border: 1.5px solid #e2e8f0 and focus ring as the Floating Label and Search Box snippets for visual consistency. The submit button below it uses a dark #1e293b fill to distinguish it from the social provider buttons above — one visual hierarchy for OAuth, a different one for the email path.

Why offer both OAuth and email

OAuth reduces friction for returning users with accounts at major providers. Email/password is necessary for users without those accounts or who prefer not to link them. Offering both maximises conversion across all user segments.

Brand colour sourcing

Each social platform publishes official brand colours in their media guidelines. Google: #4285F4 (blue), GitHub: #24292e (dark), X: #000000, LinkedIn: #0077B5. These colours are used on the button hover and focus states. The resting state uses a neutral grey or white to avoid visual clutter when multiple social buttons appear together.

The OR divider

The OR divider between social buttons and the email/password form uses ::before and ::after pseudo-elements on the label to create horizontal lines: .or-label { display: flex; align-items: center; gap: 12px; } .or-label::before, .or-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }. This pattern avoids extra HTML divider elements.

Icon-only vs icon+label variants

For compact layouts (mobile app sign-up screens with limited vertical space), use icon-only buttons: 40×40px squares with just the platform icon, arranged in a horizontal row. For web sign-up forms with more space, use icon+label buttons for clarity — "Continue with Google" is more explicit than a G icon alone. This snippet provides the icon+label pattern; adapt to icon-only by removing the text and adjusting dimensions.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the divider trick or the button hierarchy by hand. Paste this snippet's HTML and CSS into an AI coding assistant like Claude and ask it to explain exactly how the OR divider draws its two lines from a single element using flex: 1 on ::before and ::after pseudo-elements with no extra markup, or why the Google button stays white with a bordered outline while GitHub and X use solid dark fills. The same assistant can help you optimize it, for example checking whether the repeated border and transition declarations across .btn variants could be consolidated with CSS custom properties per provider. It is just as useful for extending the pattern: ask it to add a loading spinner state to each OAuth button while a redirect is in flight, generate an icon-only compact variant for mobile at 40 by 40 pixels, or wire the buttons to real provider SDKs like NextAuth.js or Supabase auth. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "social login" button stack with an OR divider and email fallback in plain HTML and CSS — no JavaScript required for the layout itself, no libraries.

Requirements:
- A vertical stack of full-width OAuth buttons (Google, GitHub, and X/Twitter at minimum), each containing an inline SVG brand icon plus a text label, laid out with flexbox and centered content.
- Follow each provider's real visual convention: the Google button uses a white background with a light border and dark text (since the multi-colored logo carries the brand identity), while GitHub and X buttons use solid dark or black fill backgrounds with white text and no border, matching their official button treatments.
- Build the "or" divider using a single container element with a text label inside, and two lines created purely with ::before and ::after pseudo-elements set to flex: 1 and a 1px height background — no extra div elements for the lines, and the two generated lines must automatically consume equal remaining space on each side of the label regardless of container width.
- Below the divider, include an email input field with a focus-visible border-color change, and a separate full-width submit button styled with a solid dark fill that is visually distinct from the OAuth buttons above it, establishing two different hierarchies: one for federated login, one for the email path.
- Ensure hover states exist for every button (a subtle background shift for the light Google-style button, a slightly darker fill for the dark-background buttons) and that all buttons are keyboard-focusable in natural tab order.

Step by step

How to Use

1
Load the snippetClick "Social Login Buttons" in the sidebar. The preview shows the full card: three OAuth buttons, OR divider, email input, and submit button.
2
Update the card headingIn the HTML panel, change the .label text from "Sign in" to "Create account" or "Welcome back" to match the page context.
3
Add or remove OAuth providersRemove any .btn you don't need. To add a new provider, copy a .btn div and update the SVG icon, brand colour, and label text.
4
Wire OAuth buttons to your backendAdd onclick handlers or href attributes to each OAuth button pointing to your OAuth redirect URL.
5
Change the divider labelUpdate the "or continue with email" text inside the .divider element if you want different copy.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Sign-up and login pages

Drop the complete OAuth + email card into any sign-up or login page. Wire the OAuth buttons to your provider redirect URLs and the email form to your backend.

Onboarding and registration flows

Use as the entry screen of a multi-step onboarding flow. The three OAuth options and email fallback maximise conversion across all user segments.

Learn the flex divider technique

The OR divider uses ::before and ::after with flex: 1 to fill equal space on both sides. Edit the CSS to understand how pseudo-elements can replace structural HTML for layout.

Developer tool and API dashboards

GitHub OAuth is the standard login for developer tools. The dark GitHub button prominently placed signals that the product is dev-focused.

Prototype authentication UIs

Use the card as a wireframe for the authentication flow. Swap provider buttons and labels in the HTML panel to test different login option combinations.

Add to any modal or drawer

The self-contained card works inside a modal, slide-in drawer, or inline section. Adjust the card width and remove the outer card padding for tight spaces.

Got questions?

Frequently Asked Questions

The .divider element has display: flex; align-items: center; gap: 10px. ::before and ::after pseudo-elements each have content: ""; flex: 1; height: 1px; background: #e2e8f0. The flex: 1 makes both lines take equal remaining space after the text label, centering it automatically.

Change each .btn button to an <a> tag with href pointing to your OAuth redirect URL — for example href="/auth/google", href="/auth/github". Or add onclick handlers that call your OAuth initiation function. The visual layout is independent of the auth mechanism.

Copy a .btn div and update the SVG to the provider logo, the label text, and add a class like .btn.linkedin. Set background, color, and hover styles for the new provider in the CSS panel.

Google requires specific button text ("Sign in with Google", "Continue with Google") and recommends using the official Google Identity Services button rather than a custom HTML button. GitHub has no strict visual requirements. For production, use the official Google Sign-In library for the Google button and a custom button for GitHub and X.

Yes. Click "JSX" to download a React component. Replace the button onClick handlers with your OAuth library calls — for example, signIn("google") from NextAuth.js or supabase.auth.signInWithOAuth({ provider: "github" }). The CSS and layout work unchanged.

Remove the outer .demo wrapper and use the card HTML directly inside your modal content. Remove the box-shadow from .demo and adjust the border-radius if the modal has its own. The card is self-contained and works in any container.

Loading…