web-dev-qa-db-fra.com

Comment changer la couleur de btn dans Bootstrap

Est-il possible de modifier toutes les propriétés .btn dans Bootstrap? J'ai essayé ci-dessous, mais parfois, il affiche la couleur bleue par défaut (par exemple après avoir cliqué et enlevé la souris, etc.). Comment puis-je changer le thème entier?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}
csstwitter-bootstraptwitter-bootstrap-3
39
Sam

Le moyen le plus simple de voir quelles propriétés vous devez remplacer consiste à jeter un coup d'œil à le code source de Bootstrap , en particulier le .button-variant mixin défini dans mixins/buttons.less . Vous devez toujours remplacer un grand nombre de propriétés pour vous débarrasser de tout le style .btn-primary (par exemple, :focus, disabled, utilisation dans les menus déroulants, etc.).

Une meilleure façon pourrait être de:

  1. Créez votre propre version personnalisée de Bootstrap en utilisant L'outil de personnalisation en ligne de Bootstrap
  2. Créez manuellement votre propre classe de couleur, par exemple .btn-whatever
  3. Utilisez un compilateur LESS et utilisez la commande .button-variant pour créer votre propre classe de couleur, par exemple. .btn-whatever
15
ckuijjer

Si vous souhaitez remplacer des propriétés par défaut dans bootstrap, vous devez les rendre aussi importantes que possible.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

j'espère que cela fonctionnera pour vous.

47
Gold Pearl

Je suppose que vous avez oublié la propriété .btn-primary:focus et la virgule après .btn-primary

Vous pouvez également utiliser less et redéfinir certaines couleurs dans le fichier variables.less

Dans cet esprit, votre code ressemblera à ceci:

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

28
Semyon Zhikharev

2018 Mise à jour pour Bootstrap 4

Maintenant que Bootstrap 4 utilise SASS, vous pouvez facilement changer la couleur du bouton principal à l’aide du button-variant mixins:

$mynewcolor:#77cccc;

.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/2bHYxYSC0n (démo SASS)

Ce SASS compile dans le CSS suivant ...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.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(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    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: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.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(119, 204, 204, 0.5)
}

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

Pour changer la couleur primaire des classes all, voir: Personnalisation du modèle CSS Bootstrap et Comment changer la couleur primaire bootstrap?

13
Zim

Créez simplement votre propre bouton sur:

À votre santé

10
Ron

Vous avez manqué un style ".btn-primary: active: focus", ce qui provoque l'affichage de la couleur d'amorçage par défaut pendant un clic sur btn click pendant une seconde . Cela fonctionne dans mon code:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}
3
Stanislav Vincent

J'avais rencontré le même problème récemment et j'ai réussi à le résoudre en ajoutant des classes

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

Faites également attention à [disabled] et [disabled]: hover, si cette classe est utilisée sur l'entrée [type = submit]. Comme ça:

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }
1
Taika

Je pense que l’utilisation de !important n’est pas une très bonne option. Cela peut entraîner de nombreux autres problèmes, en particulier lors de la réactivité du site. Donc, si j'ai bien compris, la meilleure façon de procéder consiste à utiliser une classe CSS de boutons personnalisée avec la classe .btn bootstrap. .btn est la classe de style de base pour le bouton bootstrap. Donc, gardez cela comme mise en page, nous pouvons changer d'autres styles en utilisant notre classe css personnalisée. Une autre chose que je veux mentionner ici. Certaines personnes essaient de supprimer le contour bleu des boutons. Ce n'est pas une bonne idée car ce problème d'accessibilité lors de l'utilisation du clavier. Changez sa couleur en utilisant outline-color: à la place.

0
Tharanga