Open demo

CSS code

HTML 
<div><span class="lbl">Horizontal bar under an article</span>
<div class="sh-bar" role="group" aria-labelledby="sh-title"><span class="sh-title" id="sh-title">Share this article</span>
<ul class="sh-list" role="list">
  <li><a class="sh sh-x" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg><span><span class="sr-only">Share on </span>X</span></a></li>
  <li><a class="sh sh-linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg><span><span class="sr-only">Share on </span>LinkedIn</span></a></li>
  <li><a class="sh sh-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg><span><span class="sr-only">Share on </span>Facebook</span></a></li>
  <li><a class="sh sh-bluesky" href="https://bsky.app/intent/compose?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg><span><span class="sr-only">Share on </span>Bluesky</span></a></li>
  <li><a class="sh sh-reddit" href="https://www.reddit.com/submit?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&title=How%20we%20cut%20our%20build%20time%20in%20half"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg><span><span class="sr-only">Share on </span>Reddit</span></a></li>
  <li><a class="sh sh-email" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg><span><span class="sr-only">Share by </span>Email</span></a></li>
</ul></div></div>
<div><span class="lbl">Floating vertical side bar</span>
<div class="demo-page">
  <article>
    <h3>How we cut our build time in half</h3>
    <p>Our CI pipeline had crept up to eleven minutes a run. Caching dependencies by lockfile hash took four minutes off, and splitting the test suite across three runners took most of the rest.</p>
    <p>The biggest surprise was the image step: it rebuilt every thumbnail on every run.</p>
  </article>
  <ul class="sh-side" role="list" aria-label="Share this article">
    <li><a class="sh-tile sh-x" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg></a></li>
    <li><a class="sh-tile sh-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on Facebook"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg></a></li>
    <li><a class="sh-tile sh-linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg></a></li>
    <li><a class="sh-tile sh-reddit" href="https://www.reddit.com/submit?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&title=How%20we%20cut%20our%20build%20time%20in%20half" aria-label="Share on Reddit"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg></a></li>
    <li><a class="sh-tile sh-whatsapp" href="https://wa.me/?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on WhatsApp"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a></li>
    <li><a class="sh-tile sh-email" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share by email"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg></a></li>
  </ul>
</div></div>
<div><span class="lbl">Mobile bottom bar</span>
<div class="demo-phone">
  <article>
    <h3>How we cut our build time in half</h3>
    <p>Our CI pipeline had crept up to eleven minutes a run. Caching dependencies by lockfile hash took four minutes off, and splitting the test suite across three runners took most of the rest.</p>
    <p>The biggest surprise was the image step: it rebuilt every thumbnail on every run.</p>
  </article>
  <ul class="sh-bottom" role="list" aria-label="Share this article">
    <li><a class="sh-tab sh-x" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg><span><span class="sr-only">Share on </span>X</span></a></li>
    <li><a class="sh-tab sh-whatsapp" href="https://wa.me/?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg><span><span class="sr-only">Share on </span>WhatsApp</span></a></li>
    <li><a class="sh-tab sh-telegram" href="https://t.me/share/url?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&text=How%20we%20cut%20our%20build%20time%20in%20half"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg><span><span class="sr-only">Share on </span>Telegram</span></a></li>
    <li><a class="sh-tab sh-threads" href="https://www.threads.net/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg><span><span class="sr-only">Share on </span>Threads</span></a></li>
    <li><a class="sh-tab sh-email" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg><span><span class="sr-only">Share by </span>Email</span></a></li>
  </ul>
</div></div>
CSS 
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Social share bars. Every link is a share URL for one article (encoded https://example.com/blog/faster-builds)
   and is named "Share on X", "Share by email"… — by visible text plus .sr-only words, or by aria-label when
   only an icon shows. Icons are aria-hidden. Swap the encoded URL and title for your page. */
.sh-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 0;border-block:1px solid #e2e8f0}
.sh-bar .sh-title{font-weight:700;color:#0f172a}
.sh-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sh{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;
  color:#0f172a;font-size:.9rem;font-weight:600;line-height:1;text-decoration:none;transition:background-color .2s,border-color .2s}
.sh svg{flex:none;width:18px;height:18px;fill:var(--sh-ink)}
.sh:hover,.sh:focus-visible{border-color:#0f172a;background:#f1f5f9}
.sh:focus-visible,.sh-tile:focus-visible,.sh-tab:focus-visible{outline:3px solid #0f172a;outline-offset:3px}
/* floating vertical side bar: fixed to the left edge, centred vertically */
.sh-side{position:fixed;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;margin:0;padding:8px;
  list-style:none;background:#fff;border:1px solid #e2e8f0;border-radius:999px;box-shadow:0 10px 30px -12px rgba(15,23,42,.35);z-index:20}
.sh-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sh-brand);color:var(--sh-on);
  transition:transform .2s}
.sh-tile svg{width:18px;height:18px;fill:currentColor}
.sh-tile:hover,.sh-tile:focus-visible{transform:scale(1.1)}
/* mobile bottom bar: fixed to the bottom, clears the home indicator with env(safe-area-inset-bottom) */
.sh-bottom{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;
  padding:6px 6px max(6px,env(safe-area-inset-bottom));list-style:none;background:#fff;border-top:1px solid #e2e8f0;z-index:20}
.sh-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:12px;color:#334155;
  font-size:.7rem;font-weight:600;text-decoration:none;transition:background-color .2s}
.sh-tab svg{width:22px;height:22px;fill:var(--sh-ink)}
.sh-tab:hover,.sh-tab:focus-visible{background:#f1f5f9;color:#0f172a}
.sh-tab:focus-visible{outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.sh,.sh-tile,.sh-tab{transition:none}.sh-tile:hover,.sh-tile:focus-visible{transform:none}}
.sh-bluesky{--sh-brand:#1185FE;--sh-on:#ffffff;--sh-ink:#1185FE}
.sh-email{--sh-brand:#0F766E;--sh-on:#ffffff;--sh-ink:#0F766E}
.sh-facebook{--sh-brand:#0866FF;--sh-on:#ffffff;--sh-ink:#0866FF}
.sh-linkedin{--sh-brand:#0A66C2;--sh-on:#ffffff;--sh-ink:#0A66C2}
.sh-reddit{--sh-brand:#FF4500;--sh-on:#ffffff;--sh-ink:#FF4500}
.sh-telegram{--sh-brand:#26A5E4;--sh-on:#0b0f17;--sh-ink:#0f172a}
.sh-threads{--sh-brand:#000000;--sh-on:#ffffff;--sh-ink:#000000}
.sh-whatsapp{--sh-brand:#25D366;--sh-on:#0b0f17;--sh-ink:#0f172a}
.sh-x{--sh-brand:#000000;--sh-on:#ffffff;--sh-ink:#000000}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Horizontal bar under an article</span>
<div class="sh-bar d-flex flex-wrap align-items-center py-3 border-top border-bottom" role="group" aria-labelledby="sh-title"><span class="fw-bold text-dark" id="sh-title">Share this article</span>
<ul class="sh-list list-unstyled d-flex flex-wrap m-0">
  <li><a class="btn sh sh-x" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg><span><span class="visually-hidden">Share on </span>X</span></a></li>
  <li><a class="btn sh sh-linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg><span><span class="visually-hidden">Share on </span>LinkedIn</span></a></li>
  <li><a class="btn sh sh-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg><span><span class="visually-hidden">Share on </span>Facebook</span></a></li>
  <li><a class="btn sh sh-bluesky" href="https://bsky.app/intent/compose?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg><span><span class="visually-hidden">Share on </span>Bluesky</span></a></li>
  <li><a class="btn sh sh-reddit" href="https://www.reddit.com/submit?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&title=How%20we%20cut%20our%20build%20time%20in%20half"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg><span><span class="visually-hidden">Share on </span>Reddit</span></a></li>
  <li><a class="btn sh sh-email" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg><span><span class="visually-hidden">Share by </span>Email</span></a></li>
</ul></div></div>
<div><span class="lbl">Floating vertical side bar</span>
<div class="demo-page">
  <article>
    <h3>How we cut our build time in half</h3>
    <p>Our CI pipeline had crept up to eleven minutes a run. Caching dependencies by lockfile hash took four minutes off, and splitting the test suite across three runners took most of the rest.</p>
    <p>The biggest surprise was the image step: it rebuilt every thumbnail on every run.</p>
  </article>
  <ul class="sh-side position-fixed top-50 translate-middle-y d-flex flex-column list-unstyled m-0 bg-white border rounded-pill shadow" aria-label="Share this article">
    <li><a class="btn rounded-circle sh-tile sh-x" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on X"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg></a></li>
    <li><a class="btn rounded-circle sh-tile sh-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on Facebook"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg></a></li>
    <li><a class="btn rounded-circle sh-tile sh-linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg></a></li>
    <li><a class="btn rounded-circle sh-tile sh-reddit" href="https://www.reddit.com/submit?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&title=How%20we%20cut%20our%20build%20time%20in%20half" aria-label="Share on Reddit"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg></a></li>
    <li><a class="btn rounded-circle sh-tile sh-whatsapp" href="https://wa.me/?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on WhatsApp"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a></li>
    <li><a class="btn rounded-circle sh-tile sh-email" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share by email"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg></a></li>
  </ul>
</div></div>
<div><span class="lbl">Mobile bottom bar</span>
<div class="demo-phone">
  <article>
    <h3>How we cut our build time in half</h3>
    <p>Our CI pipeline had crept up to eleven minutes a run. Caching dependencies by lockfile hash took four minutes off, and splitting the test suite across three runners took most of the rest.</p>
    <p>The biggest surprise was the image step: it rebuilt every thumbnail on every run.</p>
  </article>
  <ul class="sh-bottom nav nav-fill fixed-bottom bg-white border-top" aria-label="Share this article">
    <li class="nav-item"><a class="nav-link sh-tab sh-x" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg><span><span class="visually-hidden">Share on </span>X</span></a></li>
    <li class="nav-item"><a class="nav-link sh-tab sh-whatsapp" href="https://wa.me/?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg><span><span class="visually-hidden">Share on </span>WhatsApp</span></a></li>
    <li class="nav-item"><a class="nav-link sh-tab sh-telegram" href="https://t.me/share/url?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&text=How%20we%20cut%20our%20build%20time%20in%20half"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg><span><span class="visually-hidden">Share on </span>Telegram</span></a></li>
    <li class="nav-item"><a class="nav-link sh-tab sh-threads" href="https://www.threads.net/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg><span><span class="visually-hidden">Share on </span>Threads</span></a></li>
    <li class="nav-item"><a class="nav-link sh-tab sh-email" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg><span><span class="visually-hidden">Share by </span>Email</span></a></li>
  </ul>
</div></div>
CSS 
/* Social share bars (Bootstrap): .btn pills, a .position-fixed side bar built from utilities, and a
   .fixed-bottom bar using .nav.nav-fill. Every link is a share URL for one article and is named
   "Share on X", "Share by email"… by visible text plus .visually-hidden words, or by aria-label. */
.sh{--bs-btn-padding-x:14px;--bs-btn-padding-y:0;--bs-btn-font-size:.9rem;--bs-btn-font-weight:600;--bs-btn-line-height:1;
  --bs-btn-border-radius:999px;--bs-btn-bg:#fff;--bs-btn-border-color:#cbd5e1;--bs-btn-color:#0f172a;
  --bs-btn-hover-bg:#f1f5f9;--bs-btn-hover-border-color:#0f172a;--bs-btn-hover-color:#0f172a;--bs-btn-active-bg:#f1f5f9;--bs-btn-active-color:#0f172a;
  display:inline-flex;align-items:center;gap:8px;height:40px;transition:background-color .2s,border-color .2s}
.sh svg{flex:none;width:18px;height:18px;fill:var(--sh-ink)}
.sh-bar{gap:12px 16px}
.sh-list{gap:8px}
.sh:focus-visible,.sh-tile:focus-visible,.sh-tab:focus-visible{outline:3px solid #0f172a;outline-offset:3px;box-shadow:none}
.sh-side{left:16px;gap:8px;padding:8px;z-index:20}
.sh-tile{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-bg:var(--sh-brand);--bs-btn-border-color:var(--sh-brand);--bs-btn-color:var(--sh-on);
  --bs-btn-hover-bg:var(--sh-brand);--bs-btn-hover-border-color:var(--sh-brand);--bs-btn-hover-color:var(--sh-on);
  --bs-btn-active-bg:var(--sh-brand);--bs-btn-active-color:var(--sh-on);display:grid;place-items:center;width:40px;height:40px;transition:transform .2s}
.sh-tile svg{width:18px;height:18px;fill:currentColor}
.sh-tile:hover,.sh-tile:focus-visible{transform:scale(1.1)}
.sh-bottom{padding:6px 6px max(6px,env(safe-area-inset-bottom));z-index:20}
.sh-tab{--bs-nav-link-padding-x:2px;--bs-nav-link-padding-y:8px;--bs-nav-link-color:#334155;--bs-nav-link-hover-color:#0f172a;
  display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:12px;font-size:.7rem;font-weight:600;transition:background-color .2s}
.sh-tab svg{width:22px;height:22px;fill:var(--sh-ink)}
.sh-tab:hover,.sh-tab:focus-visible{background:#f1f5f9}
.sh-tab:focus-visible{outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.sh,.sh-tile,.sh-tab{transition:none}.sh-tile:hover,.sh-tile:focus-visible{transform:none}}
.sh-bluesky{--sh-brand:#1185FE;--sh-on:#ffffff;--sh-ink:#1185FE}
.sh-email{--sh-brand:#0F766E;--sh-on:#ffffff;--sh-ink:#0F766E}
.sh-facebook{--sh-brand:#0866FF;--sh-on:#ffffff;--sh-ink:#0866FF}
.sh-linkedin{--sh-brand:#0A66C2;--sh-on:#ffffff;--sh-ink:#0A66C2}
.sh-reddit{--sh-brand:#FF4500;--sh-on:#ffffff;--sh-ink:#FF4500}
.sh-telegram{--sh-brand:#26A5E4;--sh-on:#0b0f17;--sh-ink:#0f172a}
.sh-threads{--sh-brand:#000000;--sh-on:#ffffff;--sh-ink:#000000}
.sh-whatsapp{--sh-brand:#25D366;--sh-on:#0b0f17;--sh-ink:#0f172a}
.sh-x{--sh-brand:#000000;--sh-on:#ffffff;--sh-ink:#000000}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Horizontal bar under an article</span>
<div class="flex flex-wrap items-center gap-x-4 gap-y-3 border-y border-[#e2e8f0] py-4" role="group" aria-labelledby="sh-title"><span class="font-bold text-[#0f172a]" id="sh-title">Share this article</span>
<ul class="flex flex-wrap gap-2" role="list">
  <li><a class="inline-flex h-10 items-center gap-2 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.9rem] leading-none font-semibold text-[#0f172a] transition-colors duration-200 hover:border-[#0f172a] hover:bg-[#f1f5f9] focus-visible:border-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#000000] [--on:#ffffff] [--ink:#000000]" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[18px] flex-none fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg><span><span class="sr-only">Share on </span>X</span></a></li>
  <li><a class="inline-flex h-10 items-center gap-2 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.9rem] leading-none font-semibold text-[#0f172a] transition-colors duration-200 hover:border-[#0f172a] hover:bg-[#f1f5f9] focus-visible:border-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#0A66C2] [--on:#ffffff] [--ink:#0A66C2]" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[18px] flex-none fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg><span><span class="sr-only">Share on </span>LinkedIn</span></a></li>
  <li><a class="inline-flex h-10 items-center gap-2 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.9rem] leading-none font-semibold text-[#0f172a] transition-colors duration-200 hover:border-[#0f172a] hover:bg-[#f1f5f9] focus-visible:border-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#0866FF] [--on:#ffffff] [--ink:#0866FF]" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[18px] flex-none fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg><span><span class="sr-only">Share on </span>Facebook</span></a></li>
  <li><a class="inline-flex h-10 items-center gap-2 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.9rem] leading-none font-semibold text-[#0f172a] transition-colors duration-200 hover:border-[#0f172a] hover:bg-[#f1f5f9] focus-visible:border-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#1185FE] [--on:#ffffff] [--ink:#1185FE]" href="https://bsky.app/intent/compose?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[18px] flex-none fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg><span><span class="sr-only">Share on </span>Bluesky</span></a></li>
  <li><a class="inline-flex h-10 items-center gap-2 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.9rem] leading-none font-semibold text-[#0f172a] transition-colors duration-200 hover:border-[#0f172a] hover:bg-[#f1f5f9] focus-visible:border-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#FF4500] [--on:#ffffff] [--ink:#FF4500]" href="https://www.reddit.com/submit?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&title=How%20we%20cut%20our%20build%20time%20in%20half"><svg class="size-[18px] flex-none fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg><span><span class="sr-only">Share on </span>Reddit</span></a></li>
  <li><a class="inline-flex h-10 items-center gap-2 rounded-full border border-[#cbd5e1] bg-white px-3.5 text-[.9rem] leading-none font-semibold text-[#0f172a] transition-colors duration-200 hover:border-[#0f172a] hover:bg-[#f1f5f9] focus-visible:border-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#0F766E] [--on:#ffffff] [--ink:#0F766E]" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[18px] flex-none fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg><span><span class="sr-only">Share by </span>Email</span></a></li>
</ul></div></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Floating vertical side bar</span>
<div class="relative h-[320px] [transform:translateZ(0)] overflow-hidden rounded-2xl border border-[#e2e8f0] bg-white">
  <article class="max-w-[620px] py-7 pr-7 pl-[92px]">
    <h3 class="mb-2.5 text-[1.15rem] leading-[1.3] font-extrabold tracking-[-.01em] text-[#0f172a]">How we cut our build time in half</h3>
    <p class="mb-2.5 text-[.92rem] text-[#334155]">Our CI pipeline had crept up to eleven minutes a run. Caching dependencies by lockfile hash took four minutes off, and splitting the test suite across three runners took most of the rest.</p>
    <p class="mb-2.5 text-[.92rem] text-[#334155]">The biggest surprise was the image step: it rebuilt every thumbnail on every run.</p>
  </article>
  <ul class="fixed top-1/2 left-4 z-20 flex -translate-y-1/2 flex-col gap-2 rounded-full border border-[#e2e8f0] bg-white p-2 shadow-[0_10px_30px_-12px_rgba(15,23,42,.35)]" role="list" aria-label="Share this article">
    <li><a class="grid size-10 place-items-center rounded-full bg-(--b) text-(--on) transition-transform duration-200 hover:scale-110 focus-visible:scale-110 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100 [--b:#000000] [--on:#ffffff] [--ink:#000000]" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on X"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-full bg-(--b) text-(--on) transition-transform duration-200 hover:scale-110 focus-visible:scale-110 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100 [--b:#0866FF] [--on:#ffffff] [--ink:#0866FF]" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on Facebook"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-full bg-(--b) text-(--on) transition-transform duration-200 hover:scale-110 focus-visible:scale-110 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100 [--b:#0A66C2] [--on:#ffffff] [--ink:#0A66C2]" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on LinkedIn"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 2h15A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2zM7 5.15a1.65 1.65 0 1 0 0 3.3 1.65 1.65 0 1 0 0-3.3zM5.6 9.6v8.9h2.8V9.6zM10.4 9.6v8.9h2.8v-4.3c0-1.45.7-2.3 1.95-2.3 1.2 0 1.5.95 1.5 2.1v4.5h2.8v-5.05c0-2.45-.75-4.1-3.35-4.1-1.45 0-2.5.7-2.95 1.5V9.6z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-full bg-(--b) text-(--on) transition-transform duration-200 hover:scale-110 focus-visible:scale-110 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100 [--b:#FF4500] [--on:#ffffff] [--ink:#FF4500]" href="https://www.reddit.com/submit?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&title=How%20we%20cut%20our%20build%20time%20in%20half" aria-label="Share on Reddit"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-full bg-(--b) text-(--on) transition-transform duration-200 hover:scale-110 focus-visible:scale-110 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100 [--b:#25D366] [--on:#0b0f17] [--ink:#0f172a]" href="https://wa.me/?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share on WhatsApp"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a></li>
    <li><a class="grid size-10 place-items-center rounded-full bg-(--b) text-(--on) transition-transform duration-200 hover:scale-110 focus-visible:scale-110 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100 [--b:#0F766E] [--on:#ffffff] [--ink:#0F766E]" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds" aria-label="Share by email"><svg class="size-[18px] fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg></a></li>
  </ul>
</div></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Mobile bottom bar</span>
<div class="relative h-[400px] w-[340px] max-w-full [transform:translateZ(0)] overflow-hidden rounded-[32px] border-8 border-[#0f172a] bg-white">
  <article class="px-5 py-7">
    <h3 class="mb-2.5 text-[1.15rem] leading-[1.3] font-extrabold tracking-[-.01em] text-[#0f172a]">How we cut our build time in half</h3>
    <p class="mb-2.5 text-[.92rem] text-[#334155]">Our CI pipeline had crept up to eleven minutes a run. Caching dependencies by lockfile hash took four minutes off, and splitting the test suite across three runners took most of the rest.</p>
    <p class="mb-2.5 text-[.92rem] text-[#334155]">The biggest surprise was the image step: it rebuilt every thumbnail on every run.</p>
  </article>
  <ul class="fixed inset-x-0 bottom-0 z-20 grid grid-cols-5 border-t border-[#e2e8f0] bg-white px-1.5 pt-1.5 pb-[max(6px,env(safe-area-inset-bottom))]" role="list" aria-label="Share this article">
    <li><a class="flex flex-col items-center gap-1 rounded-xl px-0.5 py-2 text-[.7rem] font-semibold text-[#334155] transition-colors duration-200 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-[-3px] focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#000000] [--on:#ffffff] [--ink:#000000]" href="https://x.com/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half&url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[22px] fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg><span><span class="sr-only">Share on </span>X</span></a></li>
    <li><a class="flex flex-col items-center gap-1 rounded-xl px-0.5 py-2 text-[.7rem] font-semibold text-[#334155] transition-colors duration-200 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-[-3px] focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#25D366] [--on:#0b0f17] [--ink:#0f172a]" href="https://wa.me/?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[22px] fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg><span><span class="sr-only">Share on </span>WhatsApp</span></a></li>
    <li><a class="flex flex-col items-center gap-1 rounded-xl px-0.5 py-2 text-[.7rem] font-semibold text-[#334155] transition-colors duration-200 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-[-3px] focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#26A5E4] [--on:#0b0f17] [--ink:#0f172a]" href="https://t.me/share/url?url=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds&text=How%20we%20cut%20our%20build%20time%20in%20half"><svg class="size-[22px] fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg><span><span class="sr-only">Share on </span>Telegram</span></a></li>
    <li><a class="flex flex-col items-center gap-1 rounded-xl px-0.5 py-2 text-[.7rem] font-semibold text-[#334155] transition-colors duration-200 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-[-3px] focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#000000] [--on:#ffffff] [--ink:#000000]" href="https://www.threads.net/intent/post?text=How%20we%20cut%20our%20build%20time%20in%20half%20https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[22px] fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z"/></svg><span><span class="sr-only">Share on </span>Threads</span></a></li>
    <li><a class="flex flex-col items-center gap-1 rounded-xl px-0.5 py-2 text-[.7rem] font-semibold text-[#334155] transition-colors duration-200 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:bg-[#f1f5f9] focus-visible:outline-3 focus-visible:outline-offset-[-3px] focus-visible:outline-[#0f172a] motion-reduce:transition-none [--b:#0F766E] [--on:#ffffff] [--ink:#0F766E]" href="mailto:?subject=How%20we%20cut%20our%20build%20time%20in%20half&body=https%3A%2F%2Fexample.com%2Fblog%2Ffaster-builds"><svg class="size-[22px] fill-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M4.5 4h15A2.5 2.5 0 0 1 22 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-11A2.5 2.5 0 0 1 4.5 4zM5.7 6 12 10.75 18.3 6zM4 7.25V17.5c0 .28.22.5.5.5h15a.5.5 0 0 0 .5-.5V7.25l-7.4 5.55a1 1 0 0 1-1.2 0z"/></svg><span><span class="sr-only">Share by </span>Email</span></a></li>
  </ul>
</div></div>

About this set

Three share bars for articles and posts, wired to real share URLs. The horizontal bar sits under an article with a Share this article label and outlined pills for X, LinkedIn, Facebook, Bluesky, Reddit and Email. The floating vertical side bar is fixed to the left edge and centred vertically, with round brand-coloured buttons that grow slightly on hover. The mobile bottom bar is fixed to the bottom of the screen with five equal buttons, an icon over a short name, and padding from env(safe-area-inset-bottom) so it clears the home indicator on phones. Every link uses the network’s public share pattern with an encoded https://example.com address and title: x.com/intent/post, facebook.com/sharer, linkedin.com/sharing/share-offsite, bsky.app/intent/compose, threads.net/intent/post, reddit.com/submit, wa.me, t.me/share and a mailto: link with subject and body. Replace the encoded URL and title with your page’s. Mastodon is left out because it has no single share address; each server has its own. In the demo the fixed bars sit inside a frame with a transform, so they stay inside the preview. The Bootstrap version uses .btn, position utilities, .fixed-bottom and .nav-fill. No JavaScript.

What’s included

  • Horizontal, floating side and mobile bottom share bars
  • Real share URLs for X, Facebook, LinkedIn, Bluesky, Threads, Reddit, WhatsApp, Telegram and email
  • Bottom bar respects the iPhone safe area
  • Icon-only buttons are named Share on X and so on
  • Bootstrap version uses .fixed-bottom and .nav-fill

Accessibility

Every share link is named Share on X, Share on LinkedIn or Share by email, from visible text plus hidden words or from aria-label on the icon-only side bar. Each bar is a labelled group or list, icons are aria-hidden, every link shows a 3px focus outline, and the scale and colour transitions stop under prefers-reduced-motion.

Customise it

Swap the encoded URL and title in each href, change the pill and tab colours in .sh and .sh-tab, and the brand fills through the .sh-network classes. Move the side bar with left and top on .sh-side, and hide either fixed bar with a media query to show the side bar on wide screens and the bottom bar on phones.