Aperçu

Un bouton dont le fond est transparent et dont seule la bordure brille avec un dégradé. Implémentation CSS pure qui ne nécessite pas de JavaScript.

Cas d’utilisation et fonctionnalités

• Clean Design : L’arrière-plan est complètement transparent. Un look simple où seul le dégradé de la bordure ressort et n’interfère pas avec le contenu.

• Convient aux icônes, aux barres d’outils et aux boutons lumineux : convient aux boutons de commande placés sur des arrière-plans sombres, tels que les plans de théâtre.

• Aucun JavaScript requis : réalisé avec uniquement animation et mask-composite. Impact minimal sur les performances.

• Variations faciles à étendre : Vous pouvez facilement créer des boutons avec différents thèmes simplement en changeant la couleur du « dégradé linéaire ».

Points de conception et d’UX

1. Comment fonctionne mask-composite:exclus** : En définissant padding: 2px sur le pseudo-élément ::before et en masquant inversement la zone de contenu dans cette zone, seule la bordure peut être affichée.

2. ** Diriger le regard avec l’animation ** : La gradation rotative s’écoule sur la bordure pour attirer naturellement le regard sur les boutons importants.

3. Agrandissement en survol : exprimez l’anticipation d’un clic avec un changement subtil de taille de transform: scale(1.05).

Comment personnaliser

Vous pouvez créer des variations en changeant simplement la couleur du « dégradé linéaire » :

/* サンセット */

.gb-btn::before {

  background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);

}



/* オーCyan */

.gb-btn::before {

  background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6);

}

Pour modifier la largeur de la bordure, modifiez la valeur de padding :

/* 幅を広く (3px) */

.gb-btn::before { padding: 3px; }

.gb-btn::after { inset: 3px; }

##Code d’implémentation

<button class="gb-btn">Primary</button>

<button class="gb-btn gb-btn-success">Success</button>

<button class="gb-btn gb-btn-warning">Warning</button>



<style>
.gb-btn {

position: relative;

background: transparent;

border: none;

padding: 14px 36px;

font-size: 1rem;

font-weight: 600;

letter-spacing: 0.08em;

cursor: pointer;

border-radius: 8px;

color: white;

z-index: 1;

transition: transform 0.2s ease, box-shadow 0.3s ease;

}

.gb-btn::before {

content: '';

position: absolute;

inset: 0;

padding: 2px;

border-radius: 8px;

background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);

background-size: 400% 400%;

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

animation: gb-rotate 3s ease infinite;

}

.gb-btn::after {

content: '';

position: absolute;

inset: 2px;

border-radius: 6px;

background: rgba(17,24,39,0.9);

z-index: -1;

}

.gb-btn:hover { transform: scale(1.05); }

.gb-btn-success::before { background: linear-gradient(45deg, #43e97b, #38f9d7); }

.gb-btn-warning::before { background: linear-gradient(45deg, #f7971e, #ffd200); }

@keyframes gb-rotate {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

}
</style>

État de compatibilité du navigateur

| Navigateur | Statut de compatibilité |

|--------|-------|

| Chrome 80+ | ✅ Entièrement compatible |

| Firefox 99+ | ✅ Entièrement compatible |

| Safari 15.4+ | ✅Compatible |

| Bord 80+ | ✅ Entièrement compatible |

Remarque : L’ancien Safari nécessite -webkit-mask-composite: xor. En guise de solution de repli, « border: 2px solid » peut être utilisé dans des cas acceptables.