Bonjour, voici une question surement bête. Je veux personnaliser un bouton bootstrap btn-outline-secondary. Le problème est que au chargement de la page il flash très rapidement en blanc avant de retrouver son état normal. Je ne comprends pas sur quelles composantes css agir pour modifier cela.

Merci à vous.

Bonjour,

Manque de précisions

Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :

• Un descriptif clair et précis du problème (ok)
• La tentative actuelle de résolution que vous avez effectué (code)
• Le résultat attendu et le résultat actuel (copie d'écran)
• Toutes pistes de recherches pouvant aider à la résolution

Je travaille sur une intégration avec bootstrap 4

Je souhaites utiliser un bouton de type btn-outline-primary et le modifier avec du css pour qu'il ai un comportement différent. J'arrive à le modifier pour qu'il ai la plupart des propriétés que je souhaites mais lorsque je charge la page il flash avec un "background-color" blanc d'un 10eme de seconde avant de retrouver sa couleur noir normale. Aussi je souhaite modifier cette apparence pour qu'il ai sa couleur normale tout de suite.

<button type="button" class="btn btn-outline-secondary">Secondary</button>

-
Edité par kidcore 16 juillet 2019 à 21:13:53

Et le CSS que tu as mis en place ?

Si je prends juste ton code de bouton, et qu'en CSS je rajoute simplement :

.btn-outline-secondary {
    background: #FFF;
}

Je n'ai pas de souci d'affichage ... Le clignotement implique plus une interaction JS ...

-
Edité par Benzouye 16 juillet 2019 à 11:52:50

Merci, 

Ce n'est pas la couleur d'arrière plan que j'essai de changer mais bien le clignotement de début. On dirait effectivement un fondu enchainé jQuery ou JS. Je ne peux pas mettre de photo car c'est une animation. Il faudrait que je puisse mettre en ligne mais je ne sais pas comment le faire sans avoir un ftp.

Voici mon css : 

.btn-outline-secondary {
  color: #686768;
  background-color: black;
  border-color: #373536; 
  margin: 0 9px 0 9px;
  font-family: "Roboto", sans-serif;
    font-weight : bold;
    font-size: 0.9em;
    padding : 12px 15px 12px 15px;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: black;
  border-color: white;
}

Du coup j'en profite pour poser une question en lien avec la précédente. Existe-t-il un moyen de mettre en ligne des fichiers de test pour montrer son travail à quelqu'un ? Un logiciel de partage ou un ftp gratuit ? Ce serait super pratique cela doit bien exister.

-
Edité par kidcore 16 juillet 2019 à 13:26:06

Pour montrer du code HTML/CSS et JS, tu peux utiliser JSfiddle ...

Sinon, il y a en effet conflit sur une animation JS ou CSS ... crée un JSfiddle et poste le ici nous montrer ton problème exact

-
Edité par Benzouye 16 juillet 2019 à 13:37:23

J'ai trouvé ! c'est une propriété css de bootstrap de la classe btn : 

transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

Il suffit de mettre : transition: none;

-
Edité par kidcore 16 juillet 2019 à 21:14:04