web-dev-qa-db-fra.com

comment changer la couleur des boutons de la version 4 de bootstrap

Je peux changer la couleur du bouton principal en modifiant la couleur du thème dans bootstrap v4. Mais il affecte également tous les autres composants . Comment définir la couleur du bouton principal sans affecter la couleur du thème?

csstwitter-bootstrapbootstrap-4
4
Jocket

Mise à jour 2018 pour Bootstrap 4.1

Maintenant que Bootstrap 4 utilise SASS, vous pouvez facilement modifier uniquement la couleur du bouton à l’aide du button-variant mixins. Étant donné que vous souhaitez uniquement modifier la couleur du bouton principal, et non la couleur du thème principal entier, vous devez utiliser les mixins button-variant dans SASS. Vous pouvez définir les pourcentages $mynewcolor et/ou lighten() et darken() que vous souhaitez.

$mynewcolor:teal;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

_ { https://www.codeply.com/go/f3uTwmsCVZ } _ (démo SASS)

Ce SASS compile dans le CSS suivant ...

.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}

.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#009a9a;border-color:teal}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}

https://www.codeply.com/go/l9UGO7J6V1 } (démo CSS)

Pour modifier la couleur primaire de toutes les classes contextuelles (bg-primary, alert-primary, etc.), voir: Personnalisation du modèle CSS Bootstrap _ et Comment modifier la couleur primaire d'amorçage?

Voir aussi: https://stackoverflow.com/a/50973207/171456 } _

14
Zim

Essayez cette méthode 

Ajoutez un class à la button, Here custom-btn et écrivez le css correspondant dans notre stylesheet .

.btn-primary.custom-btn {
	background-color: #000;
	border-color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<button type="button" class="btn btn-primary custom-btn">Custom</button>
  <button type="button" class="btn btn-primary">Default</button>
</div>

5
Athul

Selon bootstrap documentation

De nombreux composants de Bootstrap sont construits avec une classe de base-modificateur approche. Cela signifie que l'essentiel du style est contenu dans une base classe (par exemple, .btn) tandis que les variations de style sont limitées au modificateur classes (par exemple, .btn-danger). Ces classes de modificateurs sont construites à partir de $ thème-couleurs pour personnaliser le numéro et le nom de notre classes de modificateur.

Donc, si vous changez la couleur du thème, cela affectera tout.

Vous devriez peut-être ajouter une couleur dans $ theme-colors variable si vous souhaitez utiliser cette couleur également à d'autres endroits.

4
Dhaval

Vous pouvez ajouter une couleur personnalisée ou redéfinir des couleurs en les modifiant via des variables dans des fichiers sass (Bootstrap 4).

$theme-colors: (
   primary: red,
);
@import "~bootstrap/scss/bootstrap";

Si vous utilisez les mêmes clés pour vos couleurs, vous redéfinirez Bootstrap. Sinon, vous créez de nouvelles classes avec de nouvelles clés.

Cet exemple définit couleur primaire du bleu au rouge .

4
vml

J'ai eu un problème similaire: je voulais que le bouton corresponde à la couleur de son conteneur.

J'ai donc créé une classe btn qui s'adapte automatiquement à sa couleur parente au chargement de la page. Je suis assez content du résultat (en fait, je crée même un petit plugin). JSfiddle ici

/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

$(function() {

  const hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];

  function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  }
  function hexify(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }
  function darken(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "rgb(" + parseInt(0.9 * rgb[1]) + ',' + parseInt(0.88 * rgb[2]) + ',' + parseInt(0.87 * rgb[3]) + ')';
  }

  function getParentBackground($elem) {
    var color = $elem.css("background-color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentBackground($elem.parent()));
  }

  function getParentColor($elem) {
    var color = $elem.css("color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentColor($elem.parent()));
  }

  $('.btn-negative, .btn-outline-negative').each(function() {
    var bgColor = hexify(getParentBackground($(this).parent()));
    var color = hexify(getParentColor($(this).parent()));
    var rgb = getParentColor($(this).parent());
    this.style.setProperty('--btn-negative-color0', bgColor);
    this.style.setProperty('--btn-negative-color1', color);
    this.style.setProperty('--btn-negative-shadow-color', color + "88");
    this.style.setProperty('--btn-negative-color2', hexify(darken(rgb)));
    this.style.setProperty('--btn-negative-color3', hexify(darken(darken(rgb))));
  });

});
/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

.btn-negative::before,
.btn-outline-negative::before {
  --btn-negative-color0: #fff;
  --btn-negative-color1: #000;
  --btn-negative-color2: #000;
  --btn-negative-color3: #000;
  --btn-negative-shadow-color: #0008;
}

.btn-outline-negative {
    background-color: var(--btn-negative-color0);
    border: solid 1px var(--btn-negative-color1);
    color: var(--btn-negative-color1);
}

.btn-negative,
.btn-outline-negative.active,
.btn-outline-negative:hover:not(.disabled):not([disabled]),
.btn-outline-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color1);
    color: var(--btn-negative-color0);
}

.btn-negative.active,
.btn-negative:hover:not(.disabled):not([disabled]),
.btn-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color2);
    color: var(--btn-negative-color1);
}

.btn-negative.active:hover,
.btn-negative:hover:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color3);
    color: var(--btn-negative-color1);
}

.btn-negative:focus,
.btn-outline-negative:focus {
    box-shadow: 0 0 0 .2rem var(--btn-negative-shadow-color);
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
    <div class="alert alert-success">
        <p>Some text...</p>
        <button class="btn btn-success">btn-success</button>
        <button class="btn btn-negative">btn-negative</button>
        <button class="btn btn-outline-success">btn-outline-success</button>
        <button class="btn btn-outline-negative">btn-outline-negative</button>
    </div>
</div>

En raison de l'ordre d'appel CSS dans l'extrait, le style ne s'applique pas correctement.

Toute idée pour l'améliorer est la bienvenue!

0
Jean-Marc Zimmer

Vous devez créer une feuille CSS personnalisée et remplacer le style du bouton ou ajouter le bouton à une nouvelle classe et remplacer certaines des propriétés. 

<button class="btn-primary">Button</button>

.btn-primary{
    background-color:black;
}

<button class="btn-primary custom-btn-class">Button</button>

.custom-btn-class{
     background-color:black;
}
0
Mauro Barrionuevo