Open demo

CSS code

HTML 
<div class="sb-stack">
  <button type="button" class="sb"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/></svg> Continue with Google</button>
  <button type="button" class="sb sb-github"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4 18.3 4.3 18.3 4.3c.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.1 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg> Continue with GitHub</button>
  <button type="button" class="sb sb-x"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231z"/></svg> Continue with X</button>
  <button type="button" class="sb sb-facebook"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.7 4.53-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07z"/></svg> Continue with Facebook</button>
  <div class="sb-row">
    <button type="button" class="sb sb-mini" aria-label="Share on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="#000"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231z"/></svg></button>
    <button type="button" class="sb sb-mini" aria-label="Share on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="#0a66c2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452z"/></svg></button>
    <button type="button" class="sb sb-mini" aria-label="Copy link"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
  </div>
</div>
CSS 
/* Social sign-in buttons: full-width rows with a brand SVG (aria-hidden) and a text label; round share buttons carry an aria-label. */
.sb-stack{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.sb{display:flex;align-items:center;justify-content:center;gap:11px;width:min(290px,100%);border:1px solid #747775;border-radius:11px;
  background:#fff;color:#1b2028;padding:12px;font:inherit;font-size:.9rem;font-weight:600;line-height:1.25;cursor:pointer;
  transition:transform .15s,box-shadow .15s}
.sb:hover{transform:translateY(-1.5px);box-shadow:0 8px 18px -8px rgba(20,25,40,.25)}
.sb:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.sb svg{width:19px;height:19px;flex:none}
.sb-github{background:#171a21;border-color:#171a21;color:#fff}
.sb-x{background:#000;border-color:#000;color:#fff}
.sb-facebook{background:#0866ff;border-color:#0866ff;color:#fff}
.sb-row{display:flex;gap:10px;margin-top:10px}
.sb-mini{width:52px;height:52px;border-radius:50%;padding:0}
@media (prefers-reduced-motion:reduce){.sb{transition:none}.sb:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="d-flex flex-column align-items-center w-100 social-stack">
  <button type="button" class="btn btn-social d-flex align-items-center justify-content-center"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/></svg> Continue with Google</button>
  <button type="button" class="btn btn-social btn-social-github d-flex align-items-center justify-content-center"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4 18.3 4.3 18.3 4.3c.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.1 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg> Continue with GitHub</button>
  <button type="button" class="btn btn-social btn-social-x d-flex align-items-center justify-content-center"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231z"/></svg> Continue with X</button>
  <button type="button" class="btn btn-social btn-social-facebook d-flex align-items-center justify-content-center"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.7 4.53-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07z"/></svg> Continue with Facebook</button>
  <div class="d-flex social-row">
    <button type="button" class="btn btn-social btn-social-mini rounded-circle d-flex align-items-center justify-content-center" aria-label="Share on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="#000"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231z"/></svg></button>
    <button type="button" class="btn btn-social btn-social-mini rounded-circle d-flex align-items-center justify-content-center" aria-label="Share on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="#0a66c2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452z"/></svg></button>
    <button type="button" class="btn btn-social btn-social-mini rounded-circle d-flex align-items-center justify-content-center" aria-label="Copy link"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
  </div>
</div>
CSS 
/* .btn per brand, coloured through --bs-btn-* variables; flex utilities lay out icon and label. */
.btn-social{--sb-bg:#fff;--sb-ink:#1b2028;--sb-line:#747775;
  --bs-btn-padding-x:12px;--bs-btn-padding-y:12px;--bs-btn-font-size:.9rem;--bs-btn-font-weight:600;--bs-btn-line-height:1.25;
  --bs-btn-border-radius:11px;--bs-btn-focus-box-shadow:none;
  --bs-btn-color:var(--sb-ink);--bs-btn-hover-color:var(--sb-ink);--bs-btn-active-color:var(--sb-ink);
  --bs-btn-bg:var(--sb-bg);--bs-btn-hover-bg:var(--sb-bg);--bs-btn-active-bg:var(--sb-bg);
  --bs-btn-border-color:var(--sb-line);--bs-btn-hover-border-color:var(--sb-line);--bs-btn-active-border-color:var(--sb-line);
  gap:11px;width:min(290px,100%);transition:transform .15s,box-shadow .15s}
.btn-social:hover{transform:translateY(-1.5px);box-shadow:0 8px 18px -8px rgba(20,25,40,.25)}
.btn-social:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.btn-social svg{width:19px;height:19px;flex:none}
.btn-social-github{--sb-bg:#171a21;--sb-ink:#fff;--sb-line:#171a21}
.btn-social-x{--sb-bg:#000;--sb-ink:#fff;--sb-line:#000}
.btn-social-facebook{--sb-bg:#0866ff;--sb-ink:#fff;--sb-line:#0866ff}
.btn-social-mini{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:52px;height:52px}
.social-stack{gap:12px}
.social-row{gap:10px;margin-top:10px}
@media (prefers-reduced-motion:reduce){.btn-social{transition:none}.btn-social:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex w-full flex-col items-center gap-3">
  <button type="button" class="flex cursor-pointer items-center justify-center gap-[11px] rounded-[11px] border text-[.9rem] leading-[1.25] font-semibold transition-[translate,box-shadow] duration-150 hover:-translate-y-[1.5px] hover:shadow-[0_8px_18px_-8px_rgba(20,25,40,.25)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-y-0 w-full max-w-[290px] p-3 border-[#747775] bg-white text-[#1b2028]"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="size-[19px] shrink-0"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/></svg> Continue with Google</button>
  <button type="button" class="flex cursor-pointer items-center justify-center gap-[11px] rounded-[11px] border text-[.9rem] leading-[1.25] font-semibold transition-[translate,box-shadow] duration-150 hover:-translate-y-[1.5px] hover:shadow-[0_8px_18px_-8px_rgba(20,25,40,.25)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-y-0 w-full max-w-[290px] p-3 border-[#171a21] bg-[#171a21] text-white"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" class="size-[19px] shrink-0"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4 18.3 4.3 18.3 4.3c.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.1 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg> Continue with GitHub</button>
  <button type="button" class="flex cursor-pointer items-center justify-center gap-[11px] rounded-[11px] border text-[.9rem] leading-[1.25] font-semibold transition-[translate,box-shadow] duration-150 hover:-translate-y-[1.5px] hover:shadow-[0_8px_18px_-8px_rgba(20,25,40,.25)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-y-0 w-full max-w-[290px] p-3 border-black bg-black text-white"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" class="size-[19px] shrink-0"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231z"/></svg> Continue with X</button>
  <button type="button" class="flex cursor-pointer items-center justify-center gap-[11px] rounded-[11px] border text-[.9rem] leading-[1.25] font-semibold transition-[translate,box-shadow] duration-150 hover:-translate-y-[1.5px] hover:shadow-[0_8px_18px_-8px_rgba(20,25,40,.25)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-y-0 w-full max-w-[290px] p-3 border-[#0866ff] bg-[#0866ff] text-white"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" class="size-[19px] shrink-0"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.7 4.53-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07z"/></svg> Continue with Facebook</button>
  <div class="mt-2.5 flex gap-2.5">
    <button type="button" class="flex cursor-pointer items-center justify-center gap-[11px] rounded-[11px] border text-[.9rem] leading-[1.25] font-semibold transition-[translate,box-shadow] duration-150 hover:-translate-y-[1.5px] hover:shadow-[0_8px_18px_-8px_rgba(20,25,40,.25)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-y-0 size-[52px] rounded-full border-[#747775] bg-white p-0 text-[#1b2028]" aria-label="Share on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="#000" class="size-[19px] shrink-0"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231z"/></svg></button>
    <button type="button" class="flex cursor-pointer items-center justify-center gap-[11px] rounded-[11px] border text-[.9rem] leading-[1.25] font-semibold transition-[translate,box-shadow] duration-150 hover:-translate-y-[1.5px] hover:shadow-[0_8px_18px_-8px_rgba(20,25,40,.25)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-y-0 size-[52px] rounded-full border-[#747775] bg-white p-0 text-[#1b2028]" aria-label="Share on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="#0a66c2" class="size-[19px] shrink-0"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452z"/></svg></button>
    <button type="button" class="flex cursor-pointer items-center justify-center gap-[11px] rounded-[11px] border text-[.9rem] leading-[1.25] font-semibold transition-[translate,box-shadow] duration-150 hover:-translate-y-[1.5px] hover:shadow-[0_8px_18px_-8px_rgba(20,25,40,.25)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#2563eb] motion-reduce:transition-none motion-reduce:hover:translate-y-0 size-[52px] rounded-full border-[#747775] bg-white p-0 text-[#1b2028]" aria-label="Copy link"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[19px] shrink-0"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
  </div>
</div>

About this set

A stack of full-width sign-in buttons and a row of round share buttons. The stack has Continue with Google, a white button with the four-colour G logo and a grey border, then GitHub on near-black, X on black and Facebook on its current blue, each with the brand mark in inline SVG beside the label. Below them sit three 52 pixel circles: Share on X, Share on LinkedIn and Copy link. Every button lifts 1.5 pixels with a soft shadow on hover. Use the stack on login and sign-up pages, and the round buttons under articles or in a share menu. The buttons are 290 pixels wide and shrink to fit narrow screens. The markup is plain buttons with type=”button”, so connect each one to your OAuth start URL or share handler with a click listener, or turn a share button into a link if it only navigates. Two colours were adjusted for contrast: the Google and share button borders use Google’s own #747775 grey, which reaches 3:1, and Facebook uses #0866ff so the white label reaches 4.5:1. The Bootstrap version uses flex utilities and rounded-circle.

What’s included

  • Google, GitHub, X and Facebook sign-in buttons with inline brand SVGs
  • Round share buttons for X, LinkedIn and copying a link
  • Width capped at 290px and fluid below that
  • Borders and brand blue adjusted for WCAG contrast
  • Hover lift removed under reduced motion

Accessibility

The sign-in buttons are named by their visible text and the round buttons by aria-label, for example Share on LinkedIn; every logo SVG is aria-hidden. All are native buttons reachable with Tab, and focus draws a 2px blue outline outside the button. Under prefers-reduced-motion the hover lift and its transition are removed.

Customise it

In plain CSS change the fills on .sb-github, .sb-x and .sb-facebook and the width in .sb. In Bootstrap each brand sets --sb-bg, --sb-ink and --sb-line on its .btn-social-* class; in Tailwind edit the bg-, border- and text- utilities and max-w-[290px].