Share Buttons
Round buttons that really share: X, Facebook, LinkedIn and WhatsApp links pre-filled with the address and title, the phone's share sheet, link copy.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Utilities has 43 effects, including 3 free. Explore the category →
3 usage examples
How it works
The four round buttons are real <a> links that open in a new tab. On load, the script writes their href from the address to share (data-shb-url on the root, otherwise the page's <link rel="canonical">, otherwise its address) and its title (data-shb-title, otherwise the page title), encoded: x.com/intent/tweet?url=…&text=…, facebook.com/sharer/sharer.php?u=…, linkedin.com/sharing/share-offsite/?url=…, wa.me/?text=…. The data-shb="email" value also gives a mailto: link.
The fifth button depends on the browser. If it knows navigator.share (Safari, Chrome on Android and recent desktop Chrome), "Share…" opens the system share sheet, with every app on the device. Otherwise, "Copy link" puts the address in the clipboard (execCommand('copy') fallback if the API is missing) and the label shows "Link copied" for 2.5 s, or "Copy blocked".
On hover and on keyboard focus alike, the button rises 8 px and grows 15 % with a small bounce (0.3 s), and its label (data-tip) appears above it. The buttons carry initials (X, Fb, In, Wa) on a neutral indigo gradient: no logo, no brand colour. The shb-col class on the root stacks them in a column, label on the right.
Each .fx-0740-root works on its own. The fx0740:share event (detail.via: x, facebook, native, copy…, detail.url) leaves the root on every share, for your analytics.
Accessibility
- Names: each button has a full
aria-label("Share on LinkedIn", "Copy link"); the initials and icons are hidden from screen readers. Links announce "link"; "Share…" or "Copy link", depending on the browser, announces "button". - Label on focus: the label shows on keyboard focus (
:focus-visible), not only on hover, with a lavender ring. In Safari on Mac, Tab only stops on links and buttons with the system keyboard option (otherwise Option + Tab). - Copy announced: "Link copied" or "Copy blocked" is read by the
role="status"area. - New tab: links open a tab (
target="_blank"); if many of your visitors use screen readers, add "(new tab)" at the end of thearia-labels. - Reduced motion: no jump or growth; the label appears in place, without sliding.
Browser compatibility
HTML links and 4.8 KB of commented, dependency-free JavaScript. Measured in Chromium 151, Firefox 153 and WebKit 26.5 (Playwright): code pasted twice, correct links in each copy, a click on Facebook that does open the share tab with the encoded address, link copy, blocked copy, label visible on keyboard focus, touch at 390 px, reduced motion, 0 errors. WebKit offers "Share…"; the test Chromium and Firefox, with no share sheet, show "Copy link".
Without JavaScript, the links have no address and go nowhere: write the full hrefs in the HTML in that case. navigator.share exists in Safari 12.1, Chrome Android 61, Edge 93 and desktop Chrome 128 (before, only on Windows and ChromeOS); desktop Firefox does not have it. The label on focus needs :focus-visible (Chrome 86, Firefox 85, Safari 15.4).
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0740-root" data-shb-url="https://example.com/article" data-shb-title="…" data-shb-copied="Link copied" data-shb-failed="Copy blocked">
<div class="shb-demo">
<a class="shb-btn" data-shb="x" data-tip="X" aria-label="Share on X" target="_blank" rel="noopener noreferrer"><span class="shb-mono" aria-hidden="true">X</span></a>
<a class="shb-btn" data-shb="facebook" data-tip="Facebook" aria-label="Share on Facebook" …><span class="shb-mono" aria-hidden="true">Fb</span></a>
<a class="shb-btn" data-shb="linkedin" data-tip="LinkedIn" aria-label="Share on LinkedIn" …>…</a>
<a class="shb-btn" data-shb="whatsapp" data-tip="WhatsApp" aria-label="Share on WhatsApp" …>…</a>
<button type="button" class="shb-btn shb-native" data-tip="Share…" aria-label="Share…" hidden><svg aria-hidden="true">…</svg></button>
<button type="button" class="shb-btn shb-copy" data-tip="Copy link" aria-label="Copy link"><svg aria-hidden="true">…</svg></button>
</div>
<span class="shb-status" role="status" aria-live="polite"></span>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Shared address (HTML — data-shb-url on the root) |
the canonical link, otherwise the page address | Share a specific page (challenge, product) or an address without tracking parameters. |
Shared title (HTML — data-shb-title) |
the page title | Text used by X and WhatsApp, and email subject for data-shb="email". |
Networks (HTML — data-shb on each <a class="shb-btn">) |
x, facebook, linkedin, whatsapp |
Remove a link, change the order, or add email; the initials and data-tip are edited in the HTML. |
Copy texts (HTML — data-shb-copied, data-shb-failed) |
"Link copied" · "Copy blocked" | Shown in the button's label and announced to screen readers. |
Size and spacing (CSS — --shb-size, --shb-gap) |
50 px · 15 px | The initials follow the size (30 % of the diameter). |
Button background (CSS — --shb-bg) |
linear-gradient(135deg, #4f46e5, #7c3aed) |
A colour or gradient from your brand; keep at least 4.5:1 with the white initials. |
Layout (HTML — shb-col class on the root) |
in a row | Stacks the buttons; the label opens to the right. |
Frame (CSS — --shb-height, --shb-page, --shb-panel, --shb-pad) |
300 px · #0a0a0f · #1a1a2e · 20 px |
0 and transparent to place the row in your own layout. |
FAQ
<span class="shb-mono">, the aria-label keeps the spoken name.<link rel="canonical"> or put the clean address in data-shb-url.
