Bouton à bordure dégradée

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.