Underline Expand
Un trait de 3 px dégradé indigo-violet naît du centre de l'élément et s'étend jusqu'à 60 % de sa largeur en 0,3 s au survol — pure CSS, ::after.
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
La racine .fx-0347-root centre un bouton de 200 px. Un pseudo-élément ::after positionné en absolu porte le trait : height: 3px, width: 0 au repos, bottom: 1rem (variable --space-4). left: 50% avec transform: translateX(-50%) garantit que le trait part exactement du centre, quelle que soit la largeur de l'élément. Au survol, width: 60% s'anime en 0,3 s. Le dégradé (--gradient-primary : indigo 0 %, violet 50 %, rose 100 %) est toujours visible même à largeur faible car il est calculé proportionnellement.
:focus-visible déclenche la même extension du trait que le survol, avec un contour indigo en plus. Pure CSS, aucun JavaScript. Sous mouvement réduit, la transition est désactivée mais le trait apparaît à sa largeur finale instantanément — retour d'état garanti. L'effet convient aux liens, aux onglets et aux libellés courts ; pour un trait qui commence d'un côté (plutôt que du centre), supprimez left: 50% et transform et utilisez left: 0.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est neutralisée. Le trait apparaît à 60 % de large instantanément au survol et au focus. - Clavier : l'élément est un
<button>nativement focusable.:focus-visibleétend le trait et ajoute un contour de 2 px pour signaler le focus clavier. - Toucher : le tap active généralement le survol CSS sur mobile. L'effet se dissipe au prochain changement de focus.
- Lisibilité : le trait est positionné en
bottom: 1remde l'élément, pas en bas du texte. Sur un élément de grande hauteur (ex. 200 px), il y a un espace entre le texte et le trait — adaptezbottompour le rapprocher du texte si besoin.
Compatibilité navigateur
Pure CSS. Propriétés : ::after, width (transition), transform: translateX, dégradé linéaire, :focus-visible. Vérifié dans Chromium et Firefox : trait centré, extension visible, deux copies indépendantes, 0 erreur.
Sans :focus-visible (avant 2021), le focus clavier ne déclenche pas l'extension du trait.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0347-root">
<button class="uln-box uln-line" type="button">
<span>Votre texte</span>
</button>
</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 |
|---|---|---|
Largeur finale du trait (CSS — 60%) |
60 % de l'élément | 80% ou 100% pour un trait plus affirmé ; 40% plus discret. calc(100% - 2rem) laisse une marge des deux côtés. |
Épaisseur du trait (CSS — height: 3px) |
3 px | 1 px pour une ligne hair ; 4-5 px pour un soulignement affirmé. |
Dégradé (CSS — --gradient-primary) |
indigo → violet → rose | Remplacez par une couleur unie (background: #6366f1) pour une sobriété maximale, ou par un autre dégradé. |
Position verticale (CSS — bottom: var(--space-4)) |
1 rem du bas | bottom: 4px colle le trait au bord bas de l'élément ; bottom: 50% le centre verticalement (style soulignement typographique). |
Direction (CSS — supprimer left: 50% et transform) |
départ du centre | Remplacer par left: 0 donne un trait qui part du bord gauche et s'étend vers la droite — plus classique pour des liens de navigation. |
FAQ
left: 50% et transform: translateX(-50%) sur ::after, et ajoutez left: 0. Le trait naîtra du bord gauche et s'étendra vers la droite.bottom sur ::after. Pour aligner le trait précisément sous la ligne de texte, utilisez bottom: auto; top: calc(50% + 0.7em) en ajustant l'offset selon la taille de police.background en plus de width et changez le dégradé dans la règle :hover/:focus-visible. Les navigateurs interpolent les dégradés depuis Chrome 128 / Firefox 128 — sur les versions antérieures, préférez deux couleurs unies.
