Border Gradient
Une bordure dégradée indigo-violet de 2 px apparaît en fondu au survol via deux pseudo-éléments empilés — aucun transform, pure CSS.
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-0345-root centre un bouton de 200 px. La technique repose sur deux pseudo-éléments : ::before place un fond dégradé (135°, indigo → violet) en négatif (inset: -2px) derrière l'élément, soit une couche qui déborde de 2 px sur tout le pourtour ; ::after place un fond uni de la couleur de la carte en positif (inset: 2px), masquant l'intérieur. Au repos, ::before est à opacity: 0. Au survol, il passe à 1 en 0,3 s. L'illusion d'une bordure dégradée tient au fait que seul le pourtour de 2 px est visible entre les deux pseudo-éléments.
L'élément lui-même porte border: 2px solid transparent pour maintenir l'espace sans bordure native visible. z-index: -1 sur les deux pseudo-éléments les place derrière le contenu. :focus-visible déclenche la même opacité de ::before qu'au survol, avec un contour indigo en plus. Pure CSS, aucun JavaScript. Sous mouvement réduit, la transition est supprimée mais la bordure apparaît instantanément.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transitionopacityest désactivée. La bordure dégradée apparaît instantanément au survol et au focus — retour d'état garanti. - Clavier : l'élément est un
<button>nativement focusable.:focus-visibledéclenche la bordure et ajoute un contour de 2 px décalé de 4 px, cumulant deux signaux visuels pour le focus clavier. - Toucher : le tap active l'état hover sur la plupart des navigateurs mobiles. La bordure reste visible jusqu'au prochain changement de focus.
- Rendu de la bordure : sur fond blanc, la bordure dégradée peut manquer de contraste selon les couleurs choisies. Augmentez l'épaisseur (
inset: -3px) ou ajustez les teintes pour maintenir un ratio WCAG ≥ 3:1 contre le fond.
Compatibilité navigateur
Pure CSS. Propriétés : ::before/::after, inset, opacity, transition, z-index négatif, :focus-visible. Vérifié dans Chromium et Firefox : bordure visible, deux copies indépendantes, 0 erreur. inset (raccourci) nécessite Chrome 87+, Firefox 87+, Safari 14.1+.
Sans inset (browsers avant 2021), utilisez top: -2px; right: -2px; bottom: -2px; left: -2px. Sans :focus-visible, le focus clavier ne déclenche pas la bordure.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0345-root">
<button class="gbd-box gbd-border" 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 |
|---|---|---|
Couleurs de la bordure (CSS — linear-gradient(135deg, #6366f1, #d946ef)) |
indigo → violet | Remplacez les deux couleurs pour adapter à votre charte. Ajoutez des stops intermédiaires pour un arc-en-ciel. |
Épaisseur de la bordure (CSS — inset: -2px et inset: 2px) |
2 px | Passer à -3px et 3px épaissit la bordure à 3 px. Les deux valeurs doivent être égales en valeur absolue. |
Durée (CSS — 0.3s) |
0,3 s | 0,15 s est plus vif ; 0,5 s plus doux. |
Angle du dégradé (CSS — 135deg) |
135° (diagonale) | 90deg donne un dégradé horizontal ; to right ou to bottom sont lisibles et équivalents. |
Rayon des coins du pseudo-élément (CSS — calc(var(--radius-xl) + 2px)) |
radius de la carte + 2 px | Adaptez automatiquement avec calc() si vous changez le radius de la carte. |
FAQ
border-image avec border-radius : les coins arrondis et les bordures dégradées natives sont incompatibles. Les deux pseudo-éléments empilés contournent cette limitation.z-index: -1 sur les pseudo-éléments les place derrière le fond de la carte. Si votre carte a un z-index explicite positif, ajoutez isolation: isolate sur la carte pour créer un nouveau contexte d'empilement.opacity par un @keyframes qui anime background-position sur un dégradé plus large (conic-gradient ou grand gradient linéaire). La technique sort du périmètre de cet effet, qui reste au survol.
