Un bouton en dégradé peut-il passer WCAG ?

Oui, mais il faut vérifier le contraste du texte sur les zones les plus claires et sombres du dégradé.

Puis-je animer le dégradé du bouton ?

Oui, avec background-position, mais gardez l’animation courte et non essentielle.

Faut-il une bordure ?

Pas toujours. Une bordure ou un outline est utile si le bouton doit se détacher d’un fond proche.

Bouton en dégradé CSS — hover, focus et accessibilité

Un bouton en dégradé peut donner du relief à une action principale, à condition de rester lisible, stable au hover et accessible au clavier.

Code de base

.btn-gradient {
  color: #fff;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: 0;
  border-radius: 6px;
  padding: .75rem 1rem;
  font-weight: 700;
}

Hover sans déplacement excessif

Préférez une variation de luminosité, une ombre ou un déplacement très léger. Un hover trop animé peut gêner la perception de l’action, surtout dans les interfaces denses.

.btn-gradient:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

Focus visible

Le focus clavier doit rester évident même si le bouton est coloré. Utilisez un outline contrasté avec un offset.

.btn-gradient:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

Contraste du texte

Le texte du bouton doit être testé contre les deux extrémités du dégradé. Si une extrémité est trop claire pour du texte blanc, assombrissez le dégradé ou utilisez un texte sombre.

Bouton en dégradé CSS

Code de base

Hover sans déplacement excessif

Focus visible

Contraste du texte

Questions fréquentes

Pages associées