Open demo

CSS code

HTML 
<div><span class="lbl">Labelled buttons</span>
<ul class="fb-row" role="list">
  <li><a class="fb fb-solid fb-github" href="https://github.com/uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg><span>Follow <span class="sr-only">uiCookies </span>on GitHub</span></a></li>
  <li><a class="fb fb-solid fb-linkedin" href="https://www.linkedin.com/company/uicookies"><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>Follow <span class="sr-only">uiCookies </span>on LinkedIn</span></a></li>
  <li><a class="fb fb-solid fb-facebook" href="https://www.facebook.com/uicookies"><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>Follow <span class="sr-only">uiCookies </span>on Facebook</span></a></li>
  <li><a class="fb fb-solid fb-discord" href="https://discord.gg/uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg><span>Join <span class="sr-only">uiCookies </span>on Discord</span></a></li>
  <li><a class="fb fb-solid fb-pinterest" href="https://www.pinterest.com/uicookies/"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg><span>Follow <span class="sr-only">uiCookies </span>on Pinterest</span></a></li>
</ul></div>
<div><span class="lbl">Buttons with a count</span>
<ul class="fb-row" role="list">
  <li><a class="fb fb-count fb-youtube" href="https://www.youtube.com/@uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg><span>Subscribe<span class="sr-only"> to uiCookies on YouTube,</span></span><span class="fb-n">48.2k<span class="sr-only"> subscribers</span></span></a></li>
  <li><a class="fb fb-count fb-github" href="https://github.com/uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg><span>Star<span class="sr-only"> uiCookies/blocks on GitHub,</span></span><span class="fb-n">9.6k<span class="sr-only"> stars</span></span></a></li>
  <li><a class="fb fb-count fb-mastodon" href="https://mastodon.social/@uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg><span>Follow<span class="sr-only"> uiCookies on Mastodon,</span></span><span class="fb-n">3.1k<span class="sr-only"> followers</span></span></a></li>
  <li><a class="fb fb-count fb-bluesky" href="https://bsky.app/profile/uicookies.com"><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>Follow<span class="sr-only"> uiCookies on Bluesky,</span></span><span class="fb-n">7.8k<span class="sr-only"> followers</span></span></a></li>
</ul></div>
<div><span class="lbl">Follower stat tiles</span>
<ul class="fb-stats" role="list">
  <li><a class="fb fb-stat fb-instagram" href="https://www.instagram.com/uicookies/"><span class="fb-ic"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></span><span class="sr-only">uiCookies: </span><strong>24.6k</strong><span class="fb-what">followers on Instagram</span></a></li>
  <li><a class="fb fb-stat fb-youtube" href="https://www.youtube.com/@uicookies"><span class="fb-ic"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span><span class="sr-only">uiCookies: </span><strong>48.2k</strong><span class="fb-what">subscribers on YouTube</span></a></li>
  <li><a class="fb fb-stat fb-tiktok" href="https://www.tiktok.com/@uicookies"><span class="fb-ic"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></span><span class="sr-only">uiCookies: </span><strong>18.1k</strong><span class="fb-what">followers on TikTok</span></a></li>
  <li><a class="fb fb-stat fb-linkedin" href="https://www.linkedin.com/company/uicookies"><span class="fb-ic"><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">uiCookies: </span><strong>6.3k</strong><span class="fb-what">followers on LinkedIn</span></a></li>
</ul></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 follow buttons. Every button is one link whose text is its accessible name: visible words plus
   visually hidden words (.sr-only), e.g. "Follow uiCookies on GitHub" or "Subscribe to uiCookies on YouTube,
   48.2k subscribers". Icons are aria-hidden. Solid buttons only use brand colours that keep white text at
   4.5:1. */
.fb-row{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.fb{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:.95rem;line-height:1;
  transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s}
.fb svg{flex:none;width:18px;height:18px;fill:currentColor}
.fb:focus-visible{outline:3px solid #0f172a;outline-offset:3px}
/* 1. solid labelled */
.fb-solid{height:44px;padding:0 20px 0 16px;border-radius:999px;background:var(--fb-brand);color:#fff}
.fb-solid:hover,.fb-solid:focus-visible{box-shadow:inset 0 0 0 100px rgba(0,0,0,.18)}
/* 2. button with a count */
.fb-count{height:40px;padding-left:14px;border:1px solid #94a3b8;border-radius:10px;background:#fff;color:#0f172a;overflow:hidden}
.fb-count svg{color:var(--fb-ink)}
.fb-count .fb-n{display:flex;align-items:center;align-self:stretch;padding:0 14px;border-left:1px solid #cbd5e1;background:#f1f5f9;
  font-variant-numeric:tabular-nums;color:#1e293b}
.fb-count:hover,.fb-count:focus-visible{border-color:#0f172a;box-shadow:0 2px 0 #0f172a}
/* 3. stat tiles */
.fb-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:768px){.fb-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fb-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;height:100%;padding:18px;border:1px solid #e2e8f0;border-radius:16px;
  background:#fff;color:#0f172a;font-weight:400}
.fb-stat .fb-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:var(--fb-brand);color:var(--fb-on)}
.fb-stat strong{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.fb-stat .fb-what{font-size:.85rem;line-height:1.35;color:#475569}
.fb-stat:hover,.fb-stat:focus-visible{border-color:var(--fb-ink);transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(15,23,42,.35)}
@media (prefers-reduced-motion:reduce){.fb{transition:none}.fb-stat:hover,.fb-stat:focus-visible{transform:none}}
.fb-bluesky{--fb-brand:#1185FE;--fb-on:#ffffff;--fb-ink:#1185FE}
.fb-discord{--fb-brand:#5865F2;--fb-on:#ffffff;--fb-ink:#5865F2}
.fb-facebook{--fb-brand:#0866FF;--fb-on:#ffffff;--fb-ink:#0866FF}
.fb-github{--fb-brand:#181717;--fb-on:#ffffff;--fb-ink:#181717}
.fb-instagram{--fb-brand:#FF0069;--fb-on:#ffffff;--fb-ink:#FF0069}
.fb-linkedin{--fb-brand:#0A66C2;--fb-on:#ffffff;--fb-ink:#0A66C2}
.fb-mastodon{--fb-brand:#6364FF;--fb-on:#ffffff;--fb-ink:#6364FF}
.fb-pinterest{--fb-brand:#BD081C;--fb-on:#ffffff;--fb-ink:#BD081C}
.fb-tiktok{--fb-brand:#000000;--fb-on:#ffffff;--fb-ink:#000000}
.fb-youtube{--fb-brand:#FF0000;--fb-on:#ffffff;--fb-ink:#FF0000}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Labelled buttons</span>
<ul class="fb-list list-unstyled d-flex flex-wrap m-0">
  <li><a class="btn fb fb-solid fb-github" href="https://github.com/uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg><span>Follow <span class="visually-hidden">uiCookies </span>on GitHub</span></a></li>
  <li><a class="btn fb fb-solid fb-linkedin" href="https://www.linkedin.com/company/uicookies"><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>Follow <span class="visually-hidden">uiCookies </span>on LinkedIn</span></a></li>
  <li><a class="btn fb fb-solid fb-facebook" href="https://www.facebook.com/uicookies"><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>Follow <span class="visually-hidden">uiCookies </span>on Facebook</span></a></li>
  <li><a class="btn fb fb-solid fb-discord" href="https://discord.gg/uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg><span>Join <span class="visually-hidden">uiCookies </span>on Discord</span></a></li>
  <li><a class="btn fb fb-solid fb-pinterest" href="https://www.pinterest.com/uicookies/"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg><span>Follow <span class="visually-hidden">uiCookies </span>on Pinterest</span></a></li>
</ul></div>
<div><span class="lbl">Buttons with a count</span>
<ul class="fb-list list-unstyled d-flex flex-wrap m-0">
  <li><a class="btn fb fb-count fb-youtube" href="https://www.youtube.com/@uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg><span>Subscribe<span class="visually-hidden"> to uiCookies on YouTube,</span></span><span class="badge">48.2k<span class="visually-hidden"> subscribers</span></span></a></li>
  <li><a class="btn fb fb-count fb-github" href="https://github.com/uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg><span>Star<span class="visually-hidden"> uiCookies/blocks on GitHub,</span></span><span class="badge">9.6k<span class="visually-hidden"> stars</span></span></a></li>
  <li><a class="btn fb fb-count fb-mastodon" href="https://mastodon.social/@uicookies"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg><span>Follow<span class="visually-hidden"> uiCookies on Mastodon,</span></span><span class="badge">3.1k<span class="visually-hidden"> followers</span></span></a></li>
  <li><a class="btn fb fb-count fb-bluesky" href="https://bsky.app/profile/uicookies.com"><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>Follow<span class="visually-hidden"> uiCookies on Bluesky,</span></span><span class="badge">7.8k<span class="visually-hidden"> followers</span></span></a></li>
</ul></div>
<div><span class="lbl">Follower stat tiles</span>
<ul class="row row-cols-2 row-cols-md-4 g-3 list-unstyled mb-0">
  <li class="col"><a class="card h-100 fb-stat fb-instagram" href="https://www.instagram.com/uicookies/"><span class="fb-ic"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></span><span class="visually-hidden">uiCookies: </span><strong>24.6k</strong><span class="fb-what">followers on Instagram</span></a></li>
  <li class="col"><a class="card h-100 fb-stat fb-youtube" href="https://www.youtube.com/@uicookies"><span class="fb-ic"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span><span class="visually-hidden">uiCookies: </span><strong>48.2k</strong><span class="fb-what">subscribers on YouTube</span></a></li>
  <li class="col"><a class="card h-100 fb-stat fb-tiktok" href="https://www.tiktok.com/@uicookies"><span class="fb-ic"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></span><span class="visually-hidden">uiCookies: </span><strong>18.1k</strong><span class="fb-what">followers on TikTok</span></a></li>
  <li class="col"><a class="card h-100 fb-stat fb-linkedin" href="https://www.linkedin.com/company/uicookies"><span class="fb-ic"><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">uiCookies: </span><strong>6.3k</strong><span class="fb-what">followers on LinkedIn</span></a></li>
</ul></div>
CSS 
/* Social follow buttons (Bootstrap): .btn for the labelled and count buttons with --bs-btn-* set from the
   .fb-<network> brand properties, .badge for the count, and the grid with .card for the stat tiles.
   .visually-hidden words complete each link's accessible name. */
.fb-list{gap:12px}
.fb{--bs-btn-font-weight:600;--bs-btn-font-size:.95rem;--bs-btn-line-height:1;display:inline-flex;align-items:center;gap:10px;
  transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s}
.fb svg{flex:none;width:18px;height:18px;fill:currentColor}
.fb:focus-visible{outline:3px solid #0f172a;outline-offset:3px}
.fb-solid{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-radius:999px;--bs-btn-bg:var(--fb-brand);--bs-btn-border-color:var(--fb-brand);
  --bs-btn-color:#fff;--bs-btn-hover-bg:var(--fb-brand);--bs-btn-hover-border-color:var(--fb-brand);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--fb-brand);--bs-btn-active-color:#fff;height:44px;padding:0 20px 0 16px}
.fb-solid:hover,.fb-solid:focus-visible{box-shadow:inset 0 0 0 100px rgba(0,0,0,.18)}
.fb-count{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-radius:10px;--bs-btn-bg:#fff;--bs-btn-border-color:#94a3b8;--bs-btn-color:#0f172a;
  --bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#0f172a;--bs-btn-hover-color:#0f172a;--bs-btn-active-bg:#fff;--bs-btn-active-color:#0f172a;
  height:40px;padding-left:14px;overflow:hidden}
.fb-count svg{color:var(--fb-ink)}
.fb-count .badge{--bs-badge-padding-x:14px;--bs-badge-font-size:.95rem;--bs-badge-font-weight:600;--bs-badge-color:#1e293b;--bs-badge-border-radius:0;
  display:flex;align-items:center;align-self:stretch;background:#f1f5f9;border-left:1px solid #cbd5e1;font-variant-numeric:tabular-nums}
.fb-count:hover,.fb-count:focus-visible{box-shadow:0 2px 0 #0f172a}
.fb-stat{--bs-card-border-color:#e2e8f0;--bs-card-border-radius:16px;--bs-card-color:#0f172a;align-items:flex-start;gap:4px;padding:18px;text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.fb-stat:focus-visible{outline:3px solid #0f172a;outline-offset:3px}
.fb-stat .fb-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:var(--fb-brand);color:var(--fb-on)}
.fb-stat .fb-ic svg{width:18px;height:18px;fill:currentColor}
.fb-stat strong{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.fb-stat .fb-what{font-size:.85rem;line-height:1.35;color:#475569}
.fb-stat:hover,.fb-stat:focus-visible{border-color:var(--fb-ink);transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(15,23,42,.35)}
@media (prefers-reduced-motion:reduce){.fb,.fb-stat{transition:none}.fb-stat:hover,.fb-stat:focus-visible{transform:none}}
.fb-bluesky{--fb-brand:#1185FE;--fb-on:#ffffff;--fb-ink:#1185FE}
.fb-discord{--fb-brand:#5865F2;--fb-on:#ffffff;--fb-ink:#5865F2}
.fb-facebook{--fb-brand:#0866FF;--fb-on:#ffffff;--fb-ink:#0866FF}
.fb-github{--fb-brand:#181717;--fb-on:#ffffff;--fb-ink:#181717}
.fb-instagram{--fb-brand:#FF0069;--fb-on:#ffffff;--fb-ink:#FF0069}
.fb-linkedin{--fb-brand:#0A66C2;--fb-on:#ffffff;--fb-ink:#0A66C2}
.fb-mastodon{--fb-brand:#6364FF;--fb-on:#ffffff;--fb-ink:#6364FF}
.fb-pinterest{--fb-brand:#BD081C;--fb-on:#ffffff;--fb-ink:#BD081C}
.fb-tiktok{--fb-brand:#000000;--fb-on:#ffffff;--fb-ink:#000000}
.fb-youtube{--fb-brand:#FF0000;--fb-on:#ffffff;--fb-ink:#FF0000}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Labelled buttons</span>
<ul class="flex flex-wrap gap-3" role="list">
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-11 rounded-full bg-(--b) pr-5 pl-4 text-white hover:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] focus-visible:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] [--b:#181717] [--on:#ffffff] [--ink:#181717]" href="https://github.com/uicookies"><svg class="size-[18px] flex-none fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg><span>Follow <span class="sr-only">uiCookies </span>on GitHub</span></a></li>
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-11 rounded-full bg-(--b) pr-5 pl-4 text-white hover:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] focus-visible:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] [--b:#0A66C2] [--on:#ffffff] [--ink:#0A66C2]" href="https://www.linkedin.com/company/uicookies"><svg class="size-[18px] flex-none 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><span>Follow <span class="sr-only">uiCookies </span>on LinkedIn</span></a></li>
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-11 rounded-full bg-(--b) pr-5 pl-4 text-white hover:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] focus-visible:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] [--b:#0866FF] [--on:#ffffff] [--ink:#0866FF]" href="https://www.facebook.com/uicookies"><svg class="size-[18px] flex-none 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><span>Follow <span class="sr-only">uiCookies </span>on Facebook</span></a></li>
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-11 rounded-full bg-(--b) pr-5 pl-4 text-white hover:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] focus-visible:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] [--b:#5865F2] [--on:#ffffff] [--ink:#5865F2]" href="https://discord.gg/uicookies"><svg class="size-[18px] flex-none fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg><span>Join <span class="sr-only">uiCookies </span>on Discord</span></a></li>
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-11 rounded-full bg-(--b) pr-5 pl-4 text-white hover:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] focus-visible:shadow-[inset_0_0_0_100px_rgba(0,0,0,.18)] [--b:#BD081C] [--on:#ffffff] [--ink:#BD081C]" href="https://www.pinterest.com/uicookies/"><svg class="size-[18px] flex-none fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg><span>Follow <span class="sr-only">uiCookies </span>on Pinterest</span></a></li>
</ul></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Buttons with a count</span>
<ul class="flex flex-wrap gap-3" role="list">
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-10 overflow-hidden rounded-[10px] border border-[#94a3b8] bg-white pl-3.5 text-[#0f172a] hover:border-[#0f172a] hover:shadow-[0_2px_0_#0f172a] focus-visible:border-[#0f172a] focus-visible:shadow-[0_2px_0_#0f172a] [--b:#FF0000] [--on:#ffffff] [--ink:#FF0000]" href="https://www.youtube.com/@uicookies"><svg class="size-[18px] flex-none fill-current text-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg><span>Subscribe<span class="sr-only"> to uiCookies on YouTube,</span></span><span class="flex items-center self-stretch border-l border-[#cbd5e1] bg-[#f1f5f9] px-3.5 text-[#1e293b] tabular-nums">48.2k<span class="sr-only"> subscribers</span></span></a></li>
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-10 overflow-hidden rounded-[10px] border border-[#94a3b8] bg-white pl-3.5 text-[#0f172a] hover:border-[#0f172a] hover:shadow-[0_2px_0_#0f172a] focus-visible:border-[#0f172a] focus-visible:shadow-[0_2px_0_#0f172a] [--b:#181717] [--on:#ffffff] [--ink:#181717]" href="https://github.com/uicookies"><svg class="size-[18px] flex-none fill-current text-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg><span>Star<span class="sr-only"> uiCookies/blocks on GitHub,</span></span><span class="flex items-center self-stretch border-l border-[#cbd5e1] bg-[#f1f5f9] px-3.5 text-[#1e293b] tabular-nums">9.6k<span class="sr-only"> stars</span></span></a></li>
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-10 overflow-hidden rounded-[10px] border border-[#94a3b8] bg-white pl-3.5 text-[#0f172a] hover:border-[#0f172a] hover:shadow-[0_2px_0_#0f172a] focus-visible:border-[#0f172a] focus-visible:shadow-[0_2px_0_#0f172a] [--b:#6364FF] [--on:#ffffff] [--ink:#6364FF]" href="https://mastodon.social/@uicookies"><svg class="size-[18px] flex-none fill-current text-(--ink)" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg><span>Follow<span class="sr-only"> uiCookies on Mastodon,</span></span><span class="flex items-center self-stretch border-l border-[#cbd5e1] bg-[#f1f5f9] px-3.5 text-[#1e293b] tabular-nums">3.1k<span class="sr-only"> followers</span></span></a></li>
  <li><a class="inline-flex items-center gap-2.5 text-[.95rem] leading-none font-semibold transition duration-200 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none h-10 overflow-hidden rounded-[10px] border border-[#94a3b8] bg-white pl-3.5 text-[#0f172a] hover:border-[#0f172a] hover:shadow-[0_2px_0_#0f172a] focus-visible:border-[#0f172a] focus-visible:shadow-[0_2px_0_#0f172a] [--b:#1185FE] [--on:#ffffff] [--ink:#1185FE]" href="https://bsky.app/profile/uicookies.com"><svg class="size-[18px] flex-none fill-current text-(--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>Follow<span class="sr-only"> uiCookies on Bluesky,</span></span><span class="flex items-center self-stretch border-l border-[#cbd5e1] bg-[#f1f5f9] px-3.5 text-[#1e293b] tabular-nums">7.8k<span class="sr-only"> followers</span></span></a></li>
</ul></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#475569] uppercase">Follower stat tiles</span>
<ul class="grid grid-cols-2 gap-4 md:grid-cols-4" role="list">
  <li><a class="flex h-full flex-col items-start gap-1 rounded-2xl border border-[#e2e8f0] bg-white p-[18px] text-[#0f172a] transition duration-200 hover:-translate-y-[3px] hover:border-(--ink) hover:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:-translate-y-[3px] focus-visible:border-(--ink) focus-visible:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-visible:translate-y-0 [--b:#FF0069] [--on:#ffffff] [--ink:#FF0069]" href="https://www.instagram.com/uicookies/"><span class="mb-2.5 grid size-10 place-items-center rounded-xl bg-(--b) text-(--on)"><svg class="size-[18px] flex-none fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></span><span class="sr-only">uiCookies: </span><strong class="text-[1.6rem] leading-[1.1] font-extrabold tracking-[-.02em]">24.6k</strong><span class="text-[.85rem] leading-[1.35] text-[#475569]">followers on Instagram</span></a></li>
  <li><a class="flex h-full flex-col items-start gap-1 rounded-2xl border border-[#e2e8f0] bg-white p-[18px] text-[#0f172a] transition duration-200 hover:-translate-y-[3px] hover:border-(--ink) hover:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:-translate-y-[3px] focus-visible:border-(--ink) focus-visible:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-visible:translate-y-0 [--b:#FF0000] [--on:#ffffff] [--ink:#FF0000]" href="https://www.youtube.com/@uicookies"><span class="mb-2.5 grid size-10 place-items-center rounded-xl bg-(--b) text-(--on)"><svg class="size-[18px] flex-none fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg></span><span class="sr-only">uiCookies: </span><strong class="text-[1.6rem] leading-[1.1] font-extrabold tracking-[-.02em]">48.2k</strong><span class="text-[.85rem] leading-[1.35] text-[#475569]">subscribers on YouTube</span></a></li>
  <li><a class="flex h-full flex-col items-start gap-1 rounded-2xl border border-[#e2e8f0] bg-white p-[18px] text-[#0f172a] transition duration-200 hover:-translate-y-[3px] hover:border-(--ink) hover:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:-translate-y-[3px] focus-visible:border-(--ink) focus-visible:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-visible:translate-y-0 [--b:#000000] [--on:#ffffff] [--ink:#000000]" href="https://www.tiktok.com/@uicookies"><span class="mb-2.5 grid size-10 place-items-center rounded-xl bg-(--b) text-(--on)"><svg class="size-[18px] flex-none fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg></span><span class="sr-only">uiCookies: </span><strong class="text-[1.6rem] leading-[1.1] font-extrabold tracking-[-.02em]">18.1k</strong><span class="text-[.85rem] leading-[1.35] text-[#475569]">followers on TikTok</span></a></li>
  <li><a class="flex h-full flex-col items-start gap-1 rounded-2xl border border-[#e2e8f0] bg-white p-[18px] text-[#0f172a] transition duration-200 hover:-translate-y-[3px] hover:border-(--ink) hover:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:-translate-y-[3px] focus-visible:border-(--ink) focus-visible:shadow-[0_12px_24px_-12px_rgba(15,23,42,.35)] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f172a] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-visible:translate-y-0 [--b:#0A66C2] [--on:#ffffff] [--ink:#0A66C2]" href="https://www.linkedin.com/company/uicookies"><span class="mb-2.5 grid size-10 place-items-center rounded-xl bg-(--b) text-(--on)"><svg class="size-[18px] flex-none 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></span><span class="sr-only">uiCookies: </span><strong class="text-[1.6rem] leading-[1.1] font-extrabold tracking-[-.02em]">6.3k</strong><span class="text-[.85rem] leading-[1.35] text-[#475569]">followers on LinkedIn</span></a></li>
</ul></div>

About this set

Social buttons that say what they do and how many people already have. Labelled buttons are solid pills such as Follow on GitHub, Follow on LinkedIn and Join on Discord, using only the brand colours that keep white text at 4.5:1, so YouTube red and Bluesky blue are left out of this style rather than shipped with unreadable text. Buttons with a count are white split buttons in the style of a GitHub star button: an icon and a verb on one side and a tabular count such as 48.2k on a grey segment. Follower stat tiles are a grid of cards with a brand icon tile, a large number and a line such as subscribers on YouTube, for an about page or media kit. Each button is a single link, and visually hidden words complete what a screen reader hears, so Subscribe 48.2k is announced as Subscribe to uiCookies on YouTube, 48.2k subscribers. The Bootstrap version uses .btn, .badge for the count and .row-cols with .card for the tiles; the Tailwind version uses grid and colour utilities. Counts are static text you update yourself.

What’s included

  • Labelled follow buttons with white text at 4.5:1 or better
  • Split buttons with a count segment
  • Follower stat tiles in a two to four column grid
  • Visually hidden text gives each link a complete name
  • Bootstrap version uses .btn, .badge and .card

Accessibility

Each button is one link whose accessible name is its visible text plus hidden words, for example Follow uiCookies on GitHub, so the visible label is always part of the name. Counts carry hidden units such as subscribers. Every link shows a 3px focus outline and the shadow and lift transitions are removed under prefers-reduced-motion.

Customise it

Change --fb-brand per network for the solid buttons and tile icons, and the #94a3b8 border and #f1f5f9 count segment in .fb-count. In Bootstrap the brand colour feeds --bs-btn-bg and the count is a .badge; in Tailwind edit the [--b] property and the border and background utilities.