RGB Split
Au survol, deux fantômes du libellé — rouge décalé de 2 px à gauche, cyan de 2 px à droite — apparaissent d'un coup et échangent leurs côtés une fois en 300 ms, puis restent en place — CSS seul, sur un bouton bleu nuit.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Boutons comprend 27 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au repos, .btn-rgb-split est un bouton sobre : fond #1a1a2e (bleu nuit), texte blanc, border: 1px solid rgba(255,255,255,.2), aucune ombre. Aucune transition n'est déclarée : tout ce qui suit apparaît et disparaît instantanément.
Au :hover, text-shadow: -2px 0 red, 2px 0 #0ff pose deux copies du texte derrière les glyphes : une rouge (#ff0000) décalée de 2 px vers la gauche, une cyan décalée de 2 px vers la droite. Blanc au centre, rouge à gauche, cyan à droite : c'est le décalage des canaux d'une image mal calée — l'« aberration chromatique » du nom.
En même temps démarre rgbShift, .3s ease, une seule itération : à 0 % et 100 % les fantômes sont à leur place (-2px / 2px), à 50 % ils ont échangé leurs côtés (2px / -2px). Mesuré dans Chromium : à 80 ms le rouge est déjà passé à droite (+1,4 px), à 150 ms il est à +1,9 px, à 220 ms il revient (−1,4 px). Les fantômes traversent donc le texte une fois, en 300 ms, puis la déclaration statique du :hover les maintient à ±2 px tant que la souris reste.
À la sortie du survol, les deux ombres disparaissent sans fondu, faute de transition. L'animation ne rejoue qu'à un nouveau survol. Rien ne bouge au repos, rien au clic (:active n'est pas défini) : c'est un effet strictement de survol, léger — deux ombres de texte sans flou, aucune propriété de mise en page.
Accessibilité
- Contraste du texte : blanc sur
#1a1a2e= 17,1:1, niveau AAA. Les fantômes s'ajoutent derrière les glyphes sans les recouvrir ; à 2 px, le rouge (4,3:1 sur le fond) et le cyan (13,6:1) épaississent visuellement les lettres plus qu'ils ne les brouillent — acceptable pour un libellé court en graisse 600, à éviter sous 14 px. - Repérage du bouton (WCAG 1.4.11, seuil 3:1 pour le contour d'un composant) : la face
#1a1a2esur le fond#0a0a0fdu catalogue ne contraste qu'à 1,16:1, et la bordurergba(255,255,255,.2)(soit#484859une fois composée) à 2,2:1. Une personne malvoyante distingue mal où finit le bouton. Montez la bordure àrgba(255,255,255,.35)(3,7:1) ou éclaircissez la face. - prefers-reduced-motion absent du code : le seul mouvement est l'échange de 300 ms, une fois par survol. Ajoutez
@media (prefers-reduced-motion: reduce) { .btn-rgb-split:hover { animation: none } }— les fantômes statiques restent, sans traversée. - Clavier : pas de
:hoverà la navigation Tab. Dupliquez la règle sous.btn-rgb-split:focus-visible(ombres et animation) ; l'outlinenatif est conservé et se lit bien sur le bleu nuit. - Tactile : effet exclusivement souris ; sur iOS les fantômes restent affichés après un tap jusqu'au toucher suivant (
@media (hover: hover)). Cible ≈ 52 px de haut, au-dessus du minimum de 44 px.
Compatibilité navigateur
Requiert text-shadow à ombres multiples et les animations CSS sans préfixe — tous les navigateurs depuis 2015. Aucun JavaScript, zéro dépendance.
Sans animations CSS, les deux fantômes apparaissent au survol à leur position finale (rouge à gauche, cyan à droite) sans l'échange de 300 ms : l'aberration est là, immobile. Sans text-shadow, le bouton reste un bouton bleu nuit ordinaire.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Décalage text-shadow (CSS — :hover et @keyframes rgbShift, 4 occurrences) | −2px / 2px | Amplitude de l'aberration. ±1px = frisson à peine visible ; ±4px = texte franchement triplé, lisible seulement sur un libellé court. Modifiez les quatre valeurs ensemble. |
| Couleurs des fantômes (CSS — red / #0ff) | red / #0ff | Rouge et cyan sont complémentaires : superposés au blanc ils redonnent du blanc, d'où l'effet « canaux ». #f0f / #0f0 (magenta/vert) est l'autre paire classique. |
| animation-duration (CSS — :hover) | .3s | Durée de l'échange de côtés. .15s = claquement ; .6s = glissement visible des fantômes à travers le texte. |
| animation-iteration-count (CSS — :hover) | 1 | Nombre d'échanges par survol. infinite fait osciller les fantômes tant que la souris reste — plus « glitch », plus fatigant. |
| border (CSS — .btn-rgb-split) | 1px solid rgba(255,255,255,.2) | Contour du bouton, seul repère sur un fond sombre. .35 atteint 3:1 sur #0a0a0f ; .5 est net. |
| background (CSS — .btn-rgb-split) | #1a1a2e | Face bleu nuit. Toute couleur sombre convient ; les fantômes rouge et cyan perdent leur effet sur un fond clair (le cyan disparaît sur du blanc). |
| transition (CSS — à ajouter) | aucune | transition: text-shadow .2s fait apparaître et disparaître les fantômes en fondu au lieu d'un coup ; l'animation d'échange garde la main pendant ses 300 ms. |
FAQ
transition : au survol, text-shadow passe de none à ses deux ombres instantanément, et l'animation prend le relais pour l'échange ; à la sortie, les ombres sont retirées de la même façon. Ajoutez transition: text-shadow .2s sur .btn-rgb-split : l'apparition et la disparition se fondent, et comme l'animation a priorité sur la transition pendant qu'elle tourne, l'échange de 300 ms reste intact.infinite : .btn-rgb-split:hover { animation: rgbShift .3s ease infinite }. Les fantômes oscillent alors de −2 à +2 px trois fois par seconde. C'est nettement plus agressif : réservez-le à un libellé court, ralentissez à .6s, et gardez la règle prefers-reduced-motion qui coupe l'animation.text-shadow et l'animation ne dépendent pas de la balise. Sur un texte plus grand, proportionnez le décalage à la taille de police — 0.06em à la place de 2px donne 2 px à 32 px et 4 px à 64 px — et déclenchez-le au survol du bloc parent ou en permanence. Sur un long paragraphe, l'aberration nuit à la lecture : gardez-la pour les titres et les libellés.
