Social Login Buttons
A stack of Continue with buttons for email, phone and passkey, the first one primary. A glint runs down the stack every few seconds to draw the eye. Plain glyphs, no brand logos to swap out.
Also known as: social login buttons css, continue with buttons, sign in options css.
HTML
<div class="btn-social-login">
<button class="btn-social-login-btn" type="button" style="--i:0">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
Continue with email
</button>
<button class="btn-social-login-btn" type="button" style="--i:1">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg>
Continue with phone
</button>
<button class="btn-social-login-btn" type="button" style="--i:2">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7.5" cy="15.5" r="4.5"/><path d="M10.7 12.3 20 3M16 7l3 3M14 9l2 2"/></svg>
Continue with passkey
</button>
</div>CSS
.btn-social-login {
--c: var(--btn-color, #3b82f6);
font-size: var(--btn-size, 18px);
display: grid;
gap: 0.45em;
width: 15em;}
.btn-social-login-btn {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
justify-content: flex-start;
gap: 0.75em;
padding: 0.6em 1em;
border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
background: color-mix(in srgb, var(--c) 6%, transparent);
color: inherit;
font-size: 0.9em;
font-weight: 500;
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;}
.btn-social-login-btn svg {
flex: none;
width: 1.2em;
height: 1.2em;
color: var(--c);
}
.btn-social-login-btn:first-child {
border-color: var(--c);
background: var(--c);
color: #fff;
font-weight: 600;
}
.btn-social-login-btn:first-child svg { color: inherit; }
.btn-social-login-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--c) 28%, transparent) 50%, transparent 65%);
transform: translateX(-100%);
animation: btn-social-login-glint 4s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--i) * 0.16s) infinite;
pointer-events: none;
}
.btn-social-login-btn:first-child::after {
background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
}
.btn-social-login-btn:is(:hover, :focus-visible) {
border-color: color-mix(in srgb, var(--c) 55%, transparent);
background: color-mix(in srgb, var(--c) 12%, transparent);
}
.btn-social-login-btn:first-child:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 88%, #000); }
.btn-social-login-btn:active { transform: scale(0.98); }
@keyframes btn-social-login-glint {
0% { transform: translateX(-100%); }
30%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.btn-social-login, .btn-social-login *, .btn-social-login::before, .btn-social-login::after, .btn-social-login *::before, .btn-social-login *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.