Holographic Badge
Médaillon rond cerclé d'un anneau multicolore qui tourne, avec un éclat blanc qui balaie son centre ; l'anneau accélère au survol. CSS seul.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le médaillon .hlb-badge (160 px) est un disque sombre. Son pseudo-élément ::before est un dégradé conique magenta, cyan, jaune, vert et rose, à 70 % d'opacité, qui tourne sur lui-même en 4 secondes (--hlb-speed). Le pseudo-élément ::after recouvre ce disque en retrait de 3 px (--hlb-ring) : il ne reste visible que l'anneau, dont les couleurs semblent circuler.
Au centre, la pastille .hlb-inner (75 % du diamètre) porte le texte réel, un voile coloré très léger et un fin cercle blanc. Son propre ::before est une bande blanche en diagonale qui la traverse toutes les 3 secondes (--hlb-shine), comme un reflet sur une feuille métallisée.
Au survol du médaillon, l'anneau passe à un tour par seconde (--hlb-fast). La même accélération se produit quand le médaillon est dans un lien ou un bouton qui reçoit le focus au clavier. Sans survol, tout tourne seul, en continu.
Accessibilité
- Texte réel : le mot du centre (« VERIFIED » par défaut) est dans le HTML et lu par les lecteurs d'écran ; remplacez-le par un mot de votre langue. Pour un pictogramme comme « ✓ », ajoutez un texte masqué visuellement qui dit ce qu'il signifie.
- Pas un bouton : par défaut le médaillon n'est qu'un indicateur, il n'est donc pas atteignable au clavier, et c'est voulu. S'il doit mener quelque part ou déclencher une action, placez-le dans un
<a>ou un<button>: le focus clavier accélère alors l'anneau comme le survol. - Toucher : sur un médaillon seul, le doigt n'accélère pas l'anneau dans WebKit (mesuré), alors que Chromium et Firefox appliquent le survol au toucher. Placé dans un bouton, il accélère dans les trois moteurs (mesuré).
- Mouvement réduit : avec
prefers-reduced-motion: reduce, l'anneau s'arrête et l'éclat reste immobile à 30 % d'opacité ; le médaillon et son texte restent affichés (mesuré sur deux copies : 4 animations en boucle → 0). - Pas de clignotement : rotation et éclat sont lents et continus, sans variation brusque de luminosité.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, survol, 390 px et mouvement réduit. Versions minimales d'après @mdn/browser-compat-data : le dégradé conique (Firefox 83) et la propriété inset (Chrome 87, Safari 14.1) fixent le plancher.
Sans dégradé conique, l'anneau n'est pas peint : il reste le disque sombre, la pastille et son texte. Sans inset, remplacez-le par top, right, bottom et left de même valeur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0269-root">
<div class="hlb-badge">
<div class="hlb-inner">VERIFIED</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 |
|---|---|---|
--hlb-size |
160px |
Diamètre du médaillon ; la pastille centrale suit (75 %). |
--hlb-ring |
3px |
Épaisseur de l'anneau visible. |
--hlb-speed et --hlb-fast |
4s et 1s |
Durée d'un tour de l'anneau au repos, puis au survol ou au focus. |
--hlb-shine |
3s |
Durée d'un passage de l'éclat blanc sur la pastille. |
--hlb-font |
.9rem |
Taille du texte central (en majuscules, espacé de 2 px). |
--hlb-face |
#1a1a2e |
Couleur de la face du médaillon, sous l'anneau et autour de la pastille. |
--hlb-bg et --hlb-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour la poser dans une ligne de texte ou une carte. |
Contenu de .hlb-inner |
VERIFIED |
Mot, score, pictogramme : tout ce que vous y mettez est centré sous l'éclat. |
FAQ
--hlb-size: 40px, --hlb-ring: 2px, --hlb-bg: transparent, --hlb-min-h: 0, puis display: inline-flex, width: auto et vertical-align: middle sur la racine (sinon elle passe à la ligne). Sous 40 px, gardez un seul caractère au centre.<button> ou un <a> (mesuré : le toucher accélère alors l'anneau dans les trois moteurs).conic-gradient de .hlb-badge::before : remplacez-y la liste de couleurs, en répétant la première à la fin pour éviter une cassure.
