Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Utilitaires✨ Premium

Share Buttons

Boutons ronds qui partagent vraiment : liens X, Facebook, LinkedIn et WhatsApp préremplis, feuille de partage du téléphone, copie du lien.

CSSHoverSocial

Mis à jour le

Share Buttons — aperçu ▶ Compte gratuit : aperçu en direct + 1 effet offert

Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →

Voir dans le catalogue

3 exemples d'usage

« Défie tes amis » sous le score d'un quiz — Share Buttons exemple 1

① « Défie tes amis » sous le score d'un quiz

QuandLe joueur termine un quiz sur les volcans avec 8/10 ; sous le score, la rangée de boutons lui propose d'envoyer le défi, avec un message déjà rédigé : « J'ai eu 8/10 au quiz Volcans d'Europe, à toi ! ».
PourquoiLe moment de fierté est celui où l'on partage. Le lien pointe vers une page de défi propre à ce score, pas vers l'adresse de l'écran de résultat, grâce à data-shb-url.
Réglagesdata-shb-url="https://strevinque.quiz/defi/volcans-8-10", data-shb-title = la phrase du défi, --shb-size: 46px, --shb-gap: 12px, cadre de démo à zéro. Dans la capture, la scène clique « Copier le lien » toutes les 2,6 s et prête au navigateur de capture un presse-papiers (il n'en a pas).
Barre de partage verticale dans la marge d'un reportage — Share Buttons exemple 2

② Barre de partage verticale dans la marge d'un reportage

QuandPendant la lecture d'un long reportage sur un phare, la colonne de petits boutons reste dans la marge gauche ; le lecteur copie le lien pour l'envoyer à un ami.
PourquoiEn colonne, les boutons occupent une marge vide plutôt que de couper le texte ; l'étiquette s'ouvre à droite, vers l'article, sans recouvrir le bouton voisin.
RéglagesClasse shb-col sur la racine, --shb-size: 36px, --shb-gap: 9px, colonne alignée à gauche d'une marge de 160 px. « Copier le lien » cliqué par la scène toutes les 3,3 s dans la capture.
Faire connaître un livre audio le jour de sa sortie — Share Buttons exemple 3

③ Faire connaître un livre audio le jour de sa sortie

QuandSur la page de lancement d'un livre audio, sous la couverture, le titre et l'extrait à écouter, les boutons occupent le bas du bloc avec l'appel « Faites-le connaître ».
PourquoiIci le partage est le but de la page : les boutons sont l'action principale, plus grands et teintés aux couleurs de l'éditeur, sans reprendre celles des réseaux.
Réglages--shb-size: 54px, --shb-gap: 9px, --shb-bg: linear-gradient(135deg, #0f766e, #4338ca), alignés à gauche. Copie du lien cliquée toutes les 2,6 s dans la capture.

Comment ça marche

Les quatre boutons ronds sont de vrais liens <a> qui s'ouvrent dans un nouvel onglet. Au chargement, le script écrit leur href à partir de l'adresse à partager (data-shb-url sur la racine, sinon le <link rel="canonical"> de la page, sinon son adresse) et de son titre (data-shb-title, sinon le titre de la page), encodés : x.com/intent/tweet?url=…&text=…, facebook.com/sharer/sharer.php?u=…, linkedin.com/sharing/share-offsite/?url=…, wa.me/?text=…. La valeur data-shb="email" donne aussi un lien mailto:.

Le cinquième bouton dépend du navigateur. S'il connaît navigator.share (Safari, Chrome sur Android et Chrome récent sur ordinateur), « Partager… » ouvre la feuille de partage du système, avec toutes les applis de l'appareil. Sinon, « Copier le lien » met l'adresse dans le presse-papiers (repli execCommand('copy') si l'API manque) et l'étiquette affiche « Lien copié » pendant 2,5 s, ou « Copie refusée ».

Au survol comme au focus clavier, le bouton monte de 8 px et grossit de 15 % avec un petit rebond (0,3 s), et son étiquette (data-tip) apparaît au-dessus. Les boutons portent un sigle (X, Fb, In, Wa) sur un dégradé indigo neutre : ni logo ni couleur de marque. La classe shb-col sur la racine les empile en colonne, étiquette à droite.

Chaque .fx-0740-root fonctionne seul. L'événement fx0740:share (detail.via : x, facebook, native, copy…, detail.url) part de la racine à chaque partage, pour vos statistiques.

Accessibilité

  • Noms : chaque bouton a un aria-label complet (« Partager sur LinkedIn », « Copier le lien ») ; le sigle et les icônes sont masqués aux lecteurs d'écran. Les liens annoncent « lien » ; « Partager… » ou « Copier le lien », selon le navigateur, annonce « bouton ».
  • Étiquette au focus : l'étiquette s'affiche au focus clavier (:focus-visible), pas seulement au survol, avec un anneau lavande. Sur Safari pour Mac, Tab ne s'arrête sur les liens et boutons qu'avec l'option clavier du système (sinon Option + Tab).
  • Copie annoncée : « Lien copié » ou « Copie refusée » est lu par la zone role="status".
  • Nouvel onglet : les liens ouvrent un onglet (target="_blank") ; si votre public utilise beaucoup de lecteurs d'écran, ajoutez « (nouvel onglet) » à la fin des aria-label.
  • Mouvement réduit : plus de saut ni de grossissement ; l'étiquette apparaît sur place, sans glisser.

Compatibilité navigateur

Liens HTML et 4,8 Ko de JavaScript commentés, sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : code collé deux fois, liens corrects dans chaque copie, clic sur Facebook qui ouvre bien l'onglet de partage avec l'adresse encodée, copie du lien, copie refusée, étiquette visible au focus clavier, toucher à 390 px, mouvement réduit, 0 erreur. WebKit propose « Partager… » ; Chromium et Firefox de test, sans feuille de partage, montrent « Copier le lien ».

Chrome 86+✓ Complet (mesuré) ; « Partager… » à partir de Chrome 128
Firefox 85+✓ Complet (mesuré), avec « Copier le lien »
Safari 15.4+✓ Complet (mesuré dans WebKit), avec « Partager… »
Edge 93+✓ Complet (moteur Chromium), avec « Partager… »
Mobile iOS 15.4+✓ Moteur WebKit, non vérifié sur appareil
Android Chrome 86+✓ Feuille de partage du système (toucher mesuré)

Sans JavaScript, les liens n'ont pas d'adresse et ne mènent nulle part : écrivez alors les href complets dans le HTML. navigator.share existe sur Safari 12.1, Chrome Android 61, Edge 93 et Chrome 128 sur ordinateur (avant, seulement sous Windows et ChromeOS) ; Firefox pour ordinateur ne l'a pas. L'étiquette au focus demande :focus-visible (Chrome 86, Firefox 85, Safari 15.4).

Le code

Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :

index.html — structure 
<div class="fx-0740-root" data-shb-url="https://example.com/article" data-shb-title="…" data-shb-copied="Lien copié" data-shb-failed="Copie refusée">
  <div class="shb-demo">
    <a class="shb-btn" data-shb="x" data-tip="X" aria-label="Partager sur 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="Partager sur Facebook" …><span class="shb-mono" aria-hidden="true">Fb</span></a>
    <a class="shb-btn" data-shb="linkedin" data-tip="LinkedIn" aria-label="Partager sur LinkedIn" …>…</a>
    <a class="shb-btn" data-shb="whatsapp" data-tip="WhatsApp" aria-label="Partager sur WhatsApp" …>…</a>
    <button type="button" class="shb-btn shb-native" data-tip="Partager…" aria-label="Partager…" hidden><svg aria-hidden="true">…</svg></button>
    <button type="button" class="shb-btn shb-copy" data-tip="Copier le lien" aria-label="Copier le lien"><svg aria-hidden="true">…</svg></button>
  </div>
  <span class="shb-status" role="status" aria-live="polite"></span>
</div>

Paiement unique, sans abonnement — le code est à toi pour toujours

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
Adresse partagée (HTML — data-shb-url sur la racine) le lien canonique, sinon l'adresse de la page Partagez une page précise (défi, produit) ou une adresse sans paramètres de suivi.
Titre partagé (HTML — data-shb-title) le titre de la page Texte repris par X et WhatsApp, et objet du courriel pour data-shb="email".
Réseaux (HTML — data-shb sur chaque <a class="shb-btn">) x, facebook, linkedin, whatsapp Retirez un lien, changez l'ordre, ou ajoutez email ; le sigle et data-tip se modifient dans le HTML.
Textes de la copie (HTML — data-shb-copied, data-shb-failed) « Lien copié » · « Copie refusée » Affichés dans l'étiquette du bouton et annoncés aux lecteurs d'écran.
Taille et espacement (CSS — --shb-size, --shb-gap) 50 px · 15 px Le sigle suit la taille (30 % du diamètre).
Fond des boutons (CSS — --shb-bg) linear-gradient(135deg, #4f46e5, #7c3aed) Une couleur ou un dégradé de votre charte ; gardez au moins 4,5:1 avec le sigle blanc.
Disposition (HTML — classe shb-col sur la racine) en ligne Empile les boutons ; l'étiquette s'ouvre à droite.
Cadre (CSS — --shb-height, --shb-page, --shb-panel, --shb-pad) 300 px · #0a0a0f · #1a1a2e · 20 px 0 et transparent pour placer la rangée dans votre mise en page.

FAQ

Les logos et les couleurs des réseaux sont des marques, avec leurs propres règles d'usage. Le sigle neutre s'accorde à n'importe quel site ; vous pouvez mettre votre propre icône à la place du <span class="shb-mono">, l'aria-label garde le nom lu.
Oui si votre navigateur n'a pas de feuille de partage : Firefox pour ordinateur, ou Chrome avant la version 128 hors Windows. Le bouton « Copier le lien » s'affiche alors à sa place. Sur téléphone, « Partager… » est presque toujours là.
Sans réglage, le script prend le lien canonique de la page s'il existe, sinon l'adresse affichée, paramètres compris. Ajoutez un <link rel="canonical"> ou posez l'adresse propre dans data-shb-url.