5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven share and follow buttons that load no third-party scripts: plain share links, the system share sheet with a copy fallback, follow buttons in brand colours, compact round buttons, outlined share buttons for articles, a sticky vertical share bar and a copy-link button.
Share buttons as plain links to each network's share URL, with the page address encoded in the query string. No third-party script is loaded, so nothing tracks visitors, and each link has a visible name such as Share on LinkedIn.
View code
<ul class="soc1"><li><a class="x" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Fpost" target="_blank" rel="noopener">Share on X<span class="sr"> (opens in a new tab)</span></a></li><li><a class="li" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fexample.com%2Fpost" target="_blank" rel="noopener">Share on LinkedIn<span class="sr"> (opens in a new tab)</span></a></li><li><a class="em" href="mailto:?subject=Worth%20a%20read&body=https%3A%2F%2Fexample.com%2Fpost">Share by email</a></li></ul>
On phones, navigator.share() opens the system share sheet with every app the person uses. Where it is not available, the same button copies the link instead and says so, so there is always one obvious way to share.
View code
<div class="soc2"><button>Share this page</button><p role="status"></p></div>
var b = document.querySelector('.soc2 button'), st = document.querySelector('.soc2 p'), url = 'https://example.com/post';
function copy(t) { var a = document.createElement('textarea'); a.value = t; a.style.position = 'fixed'; a.style.opacity = '0'; document.body.appendChild(a); a.select(); var ok = false; try { ok = document.execCommand('copy'); } catch (e) {} a.remove(); return ok; }
b.onclick = function () {
if (navigator.share) { navigator.share({ title: 'Worth a read', url: url }).catch(function () {}); return; }
var done = function () { st.textContent = 'Link copied to your clipboard.'; }, fail = function () { st.textContent = copy(url) ? 'Link copied to your clipboard.' : 'Copy this link: ' + url; };
if (navigator.clipboard) navigator.clipboard.writeText(url).then(done, fail); else fail();
};
03. Follow Buttons with Brand Colours
SocialFollow
Follow links styled with each network's colour and a simple letter mark, each opening the profile. The visible text says Follow on and the network, which is clearer than a row of unlabelled logos for people who do not recognise every icon.
View code
<div class="soc3"><a href="#youtube" class="yt"><span aria-hidden="true">▶</span>Follow on YouTube</a><a href="#instagram" class="ig"><span aria-hidden="true">◎</span>Follow on Instagram</a><a href="#github" class="gh"><span aria-hidden="true">{}</span>Follow on GitHub</a></div>
Compact round buttons for a footer, each showing a short mark with the full network name as its accessible name and as a title tooltip. The circle outline fills on hover and focus so the active one is easy to see.
A quieter share row for articles: outlined buttons in the site's own colours rather than brand colours, so they do not shout over the content. A Share label introduces the group, which is a list inside a labelled region.
A slim vertical bar beside a long article, sticky so it stays in view while reading. It is a labelled aside of share links, and it moves under the article on narrow screens instead of covering the text.
View code
<div class="soc6"><aside aria-label="Share this article"><a href="#x" aria-label="Share on X">X</a><a href="#in" aria-label="Share on LinkedIn">in</a><a href="#mail" aria-label="Share by email">@</a></aside><article><h3>Notes on calm design</h3><p>Fewer colours, more space, clear actions.</p><p>Every element earns its place.</p></article></div>
Often the most used share option: one button that copies the page link, confirms with Copied, and announces it. It uses the Clipboard API with a fallback for browsers or frames where the API is blocked.
var b = document.querySelector('.soc7 button'), t = b.querySelector('.t'), st = document.querySelector('.soc7 .sr'), url = 'https://example.com/post';
function fallback() { var a = document.createElement('textarea'); a.value = url; a.style.position = 'fixed'; a.style.opacity = '0'; document.body.appendChild(a); a.select(); var ok = false; try { ok = document.execCommand('copy'); } catch (e) {} a.remove(); return ok; }
function done(ok) { b.classList.toggle('ok', ok); t.textContent = ok ? 'Copied' : 'Press Ctrl+C'; st.textContent = ok ? 'Link copied' : 'Copy failed. The link is ' + url; setTimeout(function () { b.classList.remove('ok'); t.textContent = 'Copy link'; }, 2000); }
b.onclick = function () { if (navigator.clipboard) navigator.clipboard.writeText(url).then(function () { done(true); }, function () { done(fallback()); }); else done(fallback()); };
About these CSS Social Buttons
Links, not widgets
Official share widgets load scripts that track visitors across sites and slow the page. A plain link to each network's share URL does the same job with no script and no tracking.
Use the system share sheet
On phones, navigator.share() opens the share options people already use. Fall back to copying the link where it is not available.
Words beat logos
Not everyone recognises every logo. Visible text such as Share on LinkedIn is clearer, and icon-only buttons need an aria-label with the network's name.
Warn about new tabs
If a share link opens a new tab, say so in the link text or in visually hidden text, so the change of context is not a surprise.
Frequently asked questions
Can I use the networks' logos?
Brand guidelines usually allow their logos on share buttons; the demos use simple letter marks to stay generic.
Should I show share counts?
Most networks no longer provide them, and low counts can discourage sharing.
Does Web Share work on desktop?
In some desktop browsers, yes. The demo falls back to copying the link elsewhere.