Boutons dégradés en CSS qui font haut de gamme

Écrire un CSS de bouton dégradé qui fait haut de gamme tient à la retenue. Choisissez deux teintes voisines de luminosité proche, ajoutez un léger reflet le long du bord supérieur, déplacez le dégradé au survol au lieu de le remplacer, et vérifiez que le texte se lit sur la partie la plus claire. La version criarde, aux bords arc-en-ciel, est facile à faire et se repère vite comme un modèle ; la version discrète est ce qui donne à un produit un air fini.

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  background-color: #4f46e5;
  background-image: linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 6px 16px -6px rgb(79 70 229 / 0.6);
  transition: background-position 0.5s ease, transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.button:hover {
  background-position: 100% 50%;
}

.button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}

Boutons dégradés discrets ou vifs

Un bouton discret utilise deux teintes voisines sur le cercle chromatique, comme l’indigo et le violet, si bien que le dégradé se lit comme de la profondeur plutôt que du décor. Un bouton vif couvre des teintes éloignées et devient la chose la plus colorée de la page. Le vif peut marcher pour un moment de lancement ou une marque ludique ; le discret marche partout ailleurs. Chaque palette ci-dessous garde le texte blanc au-dessus de 4,5:1 aux deux extrémités.

Contraste du texte sur les boutons dégradés

Un vérificateur de contraste prend une couleur de fond, mais un bouton en a toute une gamme. Vérifiez la couleur du texte contre l’arrêt le plus clair, car c’est là que le libellé est le plus faible. Un texte de bouton de taille normale demande 4,5:1 selon les WCAG, et le vérificateur de contraste de WebAIM fait de chaque arrêt un contrôle rapide. L’échec habituel est un dégradé chaud qui finit en jaune ou en orange clair : il paraît énergique et rend la moitié du libellé illisible.

Plus de détails sur le calcul et les seuils dans le contraste des couleurs et l’accessibilité, et la même règle vaut pour tout texte sur un fond dégradé.

Des états de survol fluides pour les boutons dégradés

background-image ne se transitionne pas : remplacez un dégradé par un autre au survol et il saute. Il existe deux alternatives fluides. La première, utilisée dans la recette ci-dessus, consiste à peindre le dégradé deux fois plus large et à faire glisser background-position. La seconde place le dégradé de survol sur un pseudo-élément et en fait varier l’opacité, ce qui convient aux survols qui changent entièrement de couleur.

.button--fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(110deg, #be123c, #c2410c);
}

.button--fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(110deg, #c2410c, #be123c);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--fade:hover::before {
  opacity: 1;
}

Gardez de petits changements au survol. Un dégradé qui bouge un peu et une ombre qui s’approfondit légèrement paraissent réactifs ; un bouton qui change entièrement de teinte paraît instable. Si vous ajoutez un mouvement continu, comme un lent scintillement, coupez-le pour ceux qui préfèrent le mouvement réduit.

Bordures, contours et boutons secondaires

Un bouton dégradé par écran est en général ce qu’il faut : il marque l’action principale. Les actions secondaires vont mieux en contour qui reprend le dégradé sur un fin bord. Deux arrière-plans, l’un découpé à la boîte de remplissage et l’autre à la boîte de bordure, donnent un contour dégradé arrondi au milieu uni.

.button--outline {
  border: 2px solid transparent;
  border-radius: 999px;
  color: #312e81;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(110deg, #4f46e5, #9333ea) border-box;
}

États désactivé et chargement

Un bouton dégradé désactivé doit cesser de ressembler à une invitation. Retirez complètement le dégradé plutôt que de baisser l’opacité, ce qui peut laisser un bouton pâli mais encore coloré sur lequel on essaie d’appuyer. Un gris uni de faible contraste avec cursor: not-allowed se lit clairement comme indisponible. Pour le chargement, gardez le dégradé et remplacez le libellé par une roue pour que le bouton ne change pas de taille.

.button:disabled {
  background-image: none;
  background-color: #e5e7eb;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
}

Les finitions qui font haut de gamme

• Un reflet supérieur. inset 0 1px 0 rgb(255 255 255 / 0.25) suggère une source de lumière au-dessus et donne à la surface une légère courbure.
• Une ombre teintée. Une ombre de la teinte du bouton, plutôt que noire, le fait rayonner au lieu de flotter.
• Un seul angle pour tout. Utilisez le même angle de dégradé, comme 110deg, pour chaque contrôle en dégradé.
• Les couleurs de la marque, pas des préréglages. Le mélange doit venir de votre palette ; l’identité par le dégradé explique pourquoi.
• Un reflet conique, avec parcimonie. Un léger calque conique peut ajouter un éclat métallique ; voyez les dégradés coniques CSS.