Slide Reveal Icon
Une flèche cachée dans un span de largeur 0 ; au survol, sa max-width passe à 24 px, son opacité à 1 et un espace de 8 px s'ouvre — le bouton s'élargit de ≈ 18 px vers la droite en 300 ms, CSS seul.
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
.btn-icon-reveal est un bouton en display: inline-flex; align-items: center avec gap: 0 et un padding-right: 20px plus court que le gauche (32 px hérités de .demo-btn). Son libellé est un nœud texte, l'icône un <span class="btn-icon">➔</span> placé après. Fond linear-gradient(135deg, #059669, #10b981), texte blanc, transition: .3s sur toutes les propriétés.
Au repos, .btn-icon est replié : max-width: 0; overflow: hidden; opacity: 0. Il occupe zéro pixel de largeur et le gap: 0 ne laisse aucun espace entre le texte et lui : le bouton paraît n'avoir qu'un libellé, légèrement décentré vers la droite (20 px de padding contre 32).
Au :hover, trois valeurs changent en .3s : max-width: 24px et opacity: 1 sur l'icône, gap: 8px et padding-right: 16px sur le bouton. Mesuré dans Chromium : la flèche ➔ mesure 14,3 px à 16 px de police, donc le bouton passe de 119,6 à 137,9 px — +8 (gap) +14,3 (icône) −4 (padding) = +18,3 px. Le max-width de 24 px n'est qu'un plafond : la largeur réelle est celle du glyphe.
max-width, gap et padding sont des propriétés de mise en page : le bouton grandit vraiment et pousse ce qui le suit (ou se recentre s'il est centré). L'icône apparaît en glissant depuis la gauche parce que son conteneur s'ouvre de gauche à droite — il n'y a aucun transform.
Accessibilité
- Contraste insuffisant dans la version fournie : texte blanc sur le dégradé
#059669 → #10b981= 3,8:1 et 2,5:1, sous le seuil AA de 4,5:1 — la moitié claire tombe même sous 3:1. Passez àlinear-gradient(135deg, #065f46, #047857)(7,7:1 et 5,5:1). - Lecteurs d'écran : la flèche est un caractère texte (
➔, U+2794) et fait partie du nom accessible — annoncée « flèche large vers la droite » après le libellé par VoiceOver. Le HTML fourni ne la masque pas : ajoutezaria-hidden="true"sur.btn-icon. - prefers-reduced-motion absent du code : l'élargissement de 18 px en 300 ms est un mouvement de mise en page qui déplace les voisins. Ajoutez
@media (prefers-reduced-motion: reduce) { .btn-icon-reveal, .btn-icon-reveal .btn-icon { transition: none } }— l'icône apparaît d'un coup. - Clavier : pas de
:hoverà la navigation Tab. Dupliquez les deux règles de survol sous.btn-icon-reveal:focus-visibleet.btn-icon-reveal:focus-visible .btn-icon. L'outlinenatif n'est pas retiré et suit l'élargissement. - Tactile : sur iOS l'état déployé reste collé après un tap ; la flèche demeure visible jusqu'au toucher suivant (
@media (hover: hover)). Sans survol, l'icône n'est jamais vue sur mobile : elle ne doit porter aucune information. Cible ≈ 50 px de haut, au-dessus du minimum de 44 px.
Compatibilité navigateur
Requiert display: inline-flex avec la propriété gap sur un conteneur flex, et les transitions de max-width, gap, padding et opacity. Aucun JavaScript, zéro dépendance.
Sans gap sur flex (Safari avant 14.1, Chrome avant 84), l'icône apparaît collée au texte, sans les 8 px d'espace ; tout le reste fonctionne. Sans transitions, la flèche et l'élargissement surgissent d'un coup au survol.
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 |
|---|---|---|
| max-width (CSS — :hover .btn-icon) | 24px | Plafond de largeur de l'icône déployée. Alignez-le sur la largeur réelle du glyphe ou du SVG (14 px pour ➔ à 16 px) : une valeur trop grande allonge la transition sans rien montrer. |
| gap (CSS — .btn-icon-reveal 0 / :hover 8px) | 0 → 8px | Espace texte–icône. Son ouverture fait partie de l'élargissement ; 4px resserre, 12px détache la flèche du mot. |
| padding-right (CSS — .btn-icon-reveal 20px / :hover 16px) | 20 → 16px | Compensation partielle de l'élargissement (−4 px). Mettez 12px pour absorber davantage, ou égalisez avec le padding gauche au repos pour un libellé centré. |
| transition (CSS — .btn-icon-reveal et .btn-icon) | .3s | Durée du déploiement. .2s = vif ; .45s = lent, l'élargissement se voit alors comme un mouvement à part entière. |
| opacity (CSS — .btn-icon 0 / :hover 1) | 0 → 1 | Fondu de l'icône pendant l'ouverture. Retirez la transition d'opacité pour une flèche nette qui « sort » du bord, ou combinez avec transform: translateX(-4px) → 0 pour un glissement. |
| Icône (HTML — span.btn-icon) | ➔ (U+2794) | Le glyphe dépend de la police et du système (parfois rendu en émoji coloré). Un SVG inline de 16 × 16 px avec fill: currentColor est identique partout — donnez-lui width: 16px; flex: none. |
| background (CSS — .btn-icon-reveal) | linear-gradient(135deg, #059669, #10b981) | Couleur du bouton. Pour un contraste AA avec le texte blanc : #065f46 → #047857. |
FAQ
max-width, gap et padding changent la largeur de mise en page, +18 px environ. Trois solutions. Placer le bouton en fin de ligne (aligné à droite) ou dans un conteneur plus large que lui : il grandit dans le vide. Réserver la place dès le repos : .btn-icon { max-width: 24px; opacity: 0; transform: translateX(-8px) } et gap: 8px fixes, puis n'animer que opacity et transform au survol — la flèche glisse en place sans changer la largeur. Ou fixer min-width au bouton à sa largeur déployée.➔ (U+2794) est un caractère du bloc Dingbats : sa forme vient de la police de repli du système, et certains navigateurs mobiles le rendent en émoji coloré. Remplacez-le par un SVG inline : <svg class="btn-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 8h10M8 4l4 4-4 4" stroke="currentColor" stroke-width="2" fill="none"/></svg>, en gardant les règles .btn-icon (max-width, overflow: hidden, opacity) et en ajoutant flex: none pour qu'il ne se comprime pas.span.btn-icon avant le libellé dans le HTML et inversez les paddings : padding-left: 20px au repos, 16px au survol, padding-right: 32px fixe. Le conteneur s'ouvre toujours de gauche à droite (max-width croît depuis le bord gauche du span), donc l'icône semble se dérouler vers le texte. Pour un déroulement inverse, ajoutez direction: rtl sur le span seul.
