Copy to Clipboard
Bouton copier-coller avec confirmation visuelle : l'icône copie laisse place à une coche verte pendant 2 secondes, via classe CSS pilotée par JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0369-root peut apparaître autant de fois que nécessaire sur la même page : le script identifie chaque instance par document.querySelectorAll('.fx-0369-root') et isole ses boutons à l'intérieur. Aucun id global n'est utilisé ; deux blocs de code côte à côte fonctionnent indépendamment.
Au clic sur .mi-copy-btn, le script lit le contenu de .mi-copy-code (le texte visible dans le bloc) et le copie dans le presse-papiers. Sur un contexte sécurisé (HTTPS ou localhost), il utilise navigator.clipboard.writeText(). Sur HTTP, il bascule sur document.execCommand('copy'). Si les deux échouent — presse-papiers refusé, contexte non sécurisé sans fallback — aucune confirmation n'est affichée : la coche n'apparaît que si la copie a réellement fonctionné.
La confirmation passe par la classe CSS .copied ajoutée à la racine : les icônes copie et check et l'infobulle « Copié ! » sont toutes pilotées par transition CSS (opacity, transform), sans manipulation du DOM. La classe est retirée après 2 secondes via setTimeout. Sous prefers-reduced-motion: reduce, toutes les transitions sont supprimées ; la coche apparaît et disparaît sans animation.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les transitions CSS sont annulées (transition: none !important) ; la coche verte s'affiche sans animation et reste 2 s avant de disparaître instantanément. - Focus clavier : le bouton
.mi-copy-btnest un élément<button>natif, activable par Tab puis Entrée ou Espace. Il porte unaria-label="Copier"lisible par les lecteurs d'écran. Le contour:focus-visibleest visible. - Annonce de confirmation : l'infobulle porte
role="status" aria-live="polite"; quand le texte « Copié ! » s'y inscrit, les lecteurs d'écran l'annoncent sans interrompre la lecture en cours. - Contexte sécurisé : l'API
navigator.clipboardn'est disponible qu'en HTTPS ou surlocalhost. Sur HTTP, le fallbackexecCommandest tenté. Si les deux méthodes échouent, un message « Échec » s'affiche dans l'infobulle (aria-live="polite") — jamais « Copié ! » si rien n'a été copié.
Compatibilité navigateur
CSS transitions + 1,2 Ko de JavaScript, aucune dépendance. L'API navigator.clipboard est disponible depuis Chrome 66, Firefox 63 et Safari 13.1 en contexte sécurisé (HTTPS). Le fallback execCommand('copy') couvre les navigateurs plus anciens mais est déprécié depuis Chrome 117 et absent de Safari 17+. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : confirmation visuelle et annonce vocale correctes dans les trois.
Sans JavaScript, le bouton s'affiche mais ne copie rien et ne montre aucune confirmation. Sur HTTP (hors localhost), le fallback execCommand est tenté ; s'il échoue, aucune confirmation n'est affichée — le bouton reste silencieusement inactif. Sur les navigateurs qui bloquent le presse-papiers sans permission explicite, le comportement est identique.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0369-root">
<div class="mi-copy-scene">
<div class="mi-copy-box">
<span class="mi-copy-code">Votre texte à copier</span>
<button class="mi-copy-btn" aria-label="Copier">
<span class="mi-copy-icon-copy" aria-hidden="true"><!-- SVG copie --></span>
<span class="mi-copy-icon-check" aria-hidden="true"><!-- SVG coche --></span>
<span role="status" aria-live="polite" class="mi-tooltip">Copié !</span>
</button>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Texte à copier (HTML — contenu de .mi-copy-code) |
"npm install effect.labs" | Remplacez par n'importe quelle chaîne ; le script lit le textContent au moment du clic. Vous pouvez aussi alimenter ce span par JavaScript avant d'injecter l'effet dans la page. |
Durée de confirmation (JS — setTimeout(..., 2000)) |
2000 ms | Diminuez à 1200 ms pour un retour rapide, augmentez à 3000 ms pour laisser le temps à l'utilisateur de lire l'infobulle. |
Couleur de confirmation (CSS — .fx-0369-root.copied .mi-copy-btn) |
#4ade80 (vert) |
Remplacez par la couleur primaire de votre marque. La valeur s'applique à l'icône check et à la bordure du bouton au moment de la confirmation. |
Texte de l'infobulle (HTML — .mi-tooltip) |
"Copié !" | Remplacez par « Lien copié », « Code copié » ou tout autre libellé contextuel. Le contenu est annoncé par les lecteurs d'écran via aria-live. |
Visibilité du texte (CSS — .mi-copy-code) |
texte visible | Ajoutez display: none pour masquer le texte et n'afficher que le bouton (cas d'usage : bouton copier sur une icône ou une image). |
FAQ
navigator.clipboard n'est disponible qu'en HTTPS (ou sur localhost). Sur HTTP, le script tente le fallback execCommand('copy'), déprécié depuis Chrome 117 et absent de Safari 17+. Pour que la copie fonctionne partout, passez votre site en HTTPS — ce qui est recommandé de toute façon pour la sécurité.root.querySelector('.mi-copy-code').textContent au clic. Si vous voulez copier une valeur différente (URL, token, ID complet non tronqué), stockez-la dans data-copy sur .mi-copy-code et modifiez le script pour lire el.dataset.copy || el.textContent..fx-0369-root. Pour plusieurs boutons dans le même bloc, dupliquez la racine autant de fois que nécessaire — chaque instance est indépendante — ou adaptez le script pour parcourir plusieurs .mi-copy-btn à l'intérieur d'une seule racine.
