Fill Up
Un ::after monte de bas en haut (height 0 → 100 %) au survol avec une courbe ease-quart-out — l'élément se remplit verticalement comme un verre qu'on remplirait ; texte toujours lisible grâce au z-index.
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-0355-root centre un bloc .hover-box.hover-fill-up de 200 × 200 px. L'élément porte un fond transparent, une bordure violette et un texte violet au repos. Un pseudo-élément ::after positionné en bottom: 0; left: 0; width: 100% part avec height: 0 et monte jusqu'à height: 100% au survol avec un dégradé linear-gradient(135deg, #a78bfa, #8b5cf6).
La courbe de transition est cubic-bezier(0.65, 0, 0.35, 1) — dite ease-quart-out — qui démarre lentement puis accélère en fin de course, donnant l'impression que le liquide arrive vite en haut. Le texte passe de violet à blanc en même temps (transition: color .6s). Le z-index: -1 du ::after le place derrière le span (z-index 1) : le texte reste toujours lisible.
Mesuré dans Chromium 151 : fill de bas en haut, couleur du texte change, deux copies sur la même page — seule celle survolée se remplit.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les transitions sont annulées ; le fill et le changement de couleur restent fonctionnels (le::afterpasse à 100 % de hauteur et le texte devient blanc instantanément). L'état survol reste lisible. - Clavier : l’élément est un
<button>nativement focusable. La règle:focus-visibledéclenche le remplissage et le changement de couleur ; un contour indigo signale le focus. - Contraste : le texte violet (#a78bfa) sur fond sombre au repos a un ratio de 5,4:1 (WCAG AA). Au survol, le texte blanc sur fond violet a un ratio de 7,8:1.
- Toucher : le premier toucher déclenche le fill ; il reste en place jusqu'au prochain toucher. Sur mobile, l'état rempli peut rester actif après le départ du doigt.
Compatibilité navigateur
CSS pur (::after, height, cubic-bezier, transition, :focus-visible, prefers-reduced-motion), aucun JavaScript. Mesuré dans Chromium 151 : fill visible, texte lisible, deux copies indépendantes. Fonctionne dans tous les navigateurs modernes.
Sans transition, le fill apparaît instantanément au survol. Sans z-index correctement géré, le texte peut être masqué par le ::after — vérifiez que le span a position: relative; z-index: 1.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0355-root">
<button class="hover-box hover-fill-up" type="button">
<span>…</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 |
|---|---|---|
Couleur du fill (CSS — background du ::after) |
linear-gradient(135deg, #a78bfa, #8b5cf6) |
Remplacez par une couleur unie (#10b981 vert) ou un dégradé différent. La couleur du fill peut correspondre à l'identité de la marque. |
Courbe de remplissage (CSS — cubic-bezier(.65, 0, .35, 1)) |
ease-quart-out (accélération en fin de course) | linear donne un fill régulier ; ease-in démarre vite et ralentit ; cubic-bezier(.17, .67, .83, .67) donne un léger rebond. |
Durée (CSS — transition: height .6s) |
600 ms | .3s pour un fill vif, 1s pour un fill lent et dramatique. |
Bordure (CSS — border de .hover-fill-up) |
2 px solid #a78bfa | Retirez la bordure pour un fond plein au repos (background: var(--bg-card) + border: none) ; dans ce cas, le fill change le fond d'une couleur sombre à une couleur vive. |
Direction (CSS — ancre du ::after) |
Du bas vers le haut (bottom: 0) |
Ancrez en top: 0; height: 0 → 100% (du haut vers le bas) ou left: 0; width: 0 → 100% (de la gauche vers la droite, fill horizontal). |
FAQ
--fill: 60% sur l'élément, puis .hover-fill-up:hover::after { height: var(--fill) }. Pour des boutons de taille, posez la variable en ligne : style="--fill: 60%".span a position: relative; z-index: 1 et le ::after a z-index: -1. La transition de couleur du texte (violet → blanc) accompagne le fill pour maintenir le contraste..filled au clic : el.classList.toggle('filled'), et déclenchez le fill via .hover-fill-up.filled::after { height: 100% }.
