Bracket Hover
Crochets [ ] qui glissent et s'estompent au survol — effet de navigation 100 % CSS, aucun JavaScript, compatible tout framework.
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. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur les pseudo-éléments ::before et ::after de la classe .link-bracket. Chaque pseudo-élément porte un caractère ("[" et "]") initialement masqué (opacity: 0) et décalé vers l'intérieur (translateX(+10px) pour ::before, translateX(-10px) pour ::after). Au survol, un seul transition: .3s ramène les deux propriétés à leur valeur finale — les crochets glissent et apparaissent simultanément.
L'espacement entre le crochet et le texte est géré par la combinaison de margin-right/margin-left (0 px au repos → 5 px au survol) et du retour à translateX(0). Ces deux propriétés s'animent ensemble dans la même transition, ce qui produit un mouvement d'ouverture — comme si les crochets s'écartaient du mot plutôt que de simplement apparaître à côté.
La couleur du texte passe en parallèle de --text-secondary (#a1a1aa) à --text-primary (#ffffff) via transition: color .3s sur .nav-link-demo. Les deux transitions (texte + crochets) partagent la même durée, ce qui les synchronise sans code supplémentaire.
Aucun JavaScript n'est utilisé. Il suffit d'ajouter la classe .link-bracket à n'importe quel élément inline — <a>, <span>, <li> — qui possède déjà les styles de base, et l'effet s'active via CSS pur. Zéro dépendance, zéro bundle.
Accessibilité
- prefers-reduced-motion absent : le code source ne contient pas de media query
prefers-reduced-motion. L'animation (glissement + fondu) se déclenche quelles que soient les préférences système. Pour les utilisateurs sensibles au mouvement, ajoutez@media (prefers-reduced-motion: reduce) { .link-bracket::before, .link-bracket::after { transition: opacity .3s; transform: none; } }. - Contraste au repos :
#a1a1aasur#0a0a0f— ratio ≈ 7,9:1, au-dessus du seuil WCAG AA (4,5:1) et AAA (7:1) pour le texte courant. Au survol (#ffffff), ratio = 21:1. - Les éléments de la démo sont des
<span>non focusables. En production, utilisez des<a href>natifs : les liens sont focusables au clavier, visités, et annoncés correctement par les lecteurs d'écran — le CSS de l'effet s'applique sans modification. - Aucun attribut
aria-*n'est présent dans la démo. Pour une navigation principale, enveloppez les liens dans un<nav aria-label="Navigation principale">et utilisezaria-current="page"sur le lien actif. - Les crochets générés par
::before/::aftersont du contenu purement décoratif. Ils sont ignorés par les lecteurs d'écran (les pseudo-éléments CSS ne sont pas exposés dans l'arbre d'accessibilité).
Compatibilité navigateur
Nécessite les pseudo-éléments CSS et les transitions — supportés dans tous les navigateurs modernes depuis 2013. Zéro dépendance JavaScript.
Sur un navigateur sans support des transitions CSS, les crochets apparaissent et disparaissent instantanément au survol — l'effet reste fonctionnel, sans erreur.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<nav class="nav-demo">
<a class="nav-link-demo link-bracket" href="#">Accueil</a>
<a class="nav-link-demo link-bracket" href="#">Services</a>
<a class="nav-link-demo link-bracket" href="#">Contact</a>
</nav>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 |
|---|---|---|
| --text-secondary | #a1a1aa | Couleur du texte au repos. Adaptez à votre palette brand — gardez un ratio ≥ 4,5:1 sur le fond. |
| --text-primary | #ffffff | Couleur du texte et des crochets au survol. |
| --space-8 | 2rem | Espacement (gap) entre les items de navigation. Réduisez à 1rem pour une liste verticale compacte. |
| --space-2 | 0.5rem | Padding vertical sur chaque lien — agrandit la zone cliquable. |
| transition | .3s | Durée d'animation des crochets et de la couleur. Valeur dans .link-bracket::before, .link-bracket::after et .nav-link-demo. Réduisez à .15s pour un effet plus sec, augmentez à .5s pour un effet plus doux. |
| translateX (repos) | 10px / -10px | Distance de glissement initial des crochets — translateX(10px) dans .link-bracket::before, translateX(-10px) dans .link-bracket::after. Augmentez pour un glissement plus prononcé. |
| margin (survol) | 5px | Espacement entre le crochet et le texte au survol — margin-right: 5px dans .link-bracket:hover::before, margin-left: 5px dans .link-bracket:hover::after. |
| content | "[" / "]" | Caractères affichés comme crochets — remplacez par "«" / "»", "<" / ">", "(" / ")" pour une variation stylistique. |
FAQ
opacity, transform et transition. Aucun script n'est inclus. Vous pouvez l'intégrer dans n'importe quel framework (React, Vue, Svelte, Angular) sans composant dédié : appliquez simplement les classes CSS à vos éléments de navigation.content dans les règles .link-bracket::before (ex. content: "«") et .link-bracket::after (ex. content: "»"). Fonctionne avec n'importe quel caractère Unicode, emoji ou chaîne courte. Adaptez margin-right/margin-left au survol si le caractère est plus large que le crochet d'origine.nav-link-demo link-bracket directement sur vos balises <a>. La démo utilise des <span> pour la neutralité, mais en production les liens natifs sont préférables : ils sont focusables au clavier, répertoriés par les lecteurs d'écran et stylisés par :visited. L'effet CSS s'applique identiquement.
