Style twitter bootstrap boutons

J'ai trouvé le moyen le plus simple est de mettre cela dans vos remplacements. Désolé pour mon manque d'originalité choix de couleur

Bootstrap 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 4 Alpha SASS Exemple

Bootstrap 3 MOINS

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap 3 MOINS Exemple

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 3 SASS Exemple

Bootstrap 2.3 MOINS

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Bootstrap 2.3 MOINS Exemple

Bootstrap 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

Il prendra soin de hover/actives pour vous

Les commentaires, si vous voulez alléger le bouton au lieu de foncer lors de l'utilisation de noir (ou simplement à l'inverse de), vous devez étendre la classe un peu plus loin comme suit:

Bootstrap 3 SASS Ligthen

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  //override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); //12% default
  }
}

Bootstrap 3 SASS Alléger Exemple

Ici est une bonne ressource: http://charliepark.org/bootstrap_buttons/

Vous pouvez modifier la couleur et de voir l'effet dans l'action.

Au lieu de changer de CSS valeurs une par une, je suggère d'utiliser De moins en MOINS. Bootstrap a MOINS la version sur Github: https://github.com/twbs/bootstrap

MOINS vous permet de définir les variables à modifier les couleurs qui rend les choses beaucoup plus pratique. Définir la couleur une fois et MOINS compile le fichier CSS qui permet de modifier les valeurs à l'échelle mondiale. Permet d'économiser du temps et de l'effort.

Pour Bootstrap pour Sass remplacer c'est

.btn-default {

    @include button-variant($color, $background, $border);

}

Vous pouvez voir la source pour elle ici: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Ici est très simple et eficient façon:
ajouter dans votre CSS de votre classe avec les couleurs que vous souhaitez appliquer à votre bouton:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

et ajoutez le style à votre bootstrap bouton ou le lien:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

Je sais que c'est un vieux thread, mais juste pour ajouter un autre point de vue. Je voudrais affirmer que l'utilisation des remplacements est vraiment un peu une odeur de code et va rapidement sortir de la main sur les plus grands projets. Vous êtes aujourd'hui primordial de Boutons, de demain des Modaux, le jour suivant, des listes déroulantes, etc., etc.

Je vous conseille d'essayer, éventuellement, commentant les inclure pour buttons.less et de définir ma propre, ou trouver une autre bibliothèque de Boutons, c'est plus adapté à mon projet. Shameless plug: voici un exemple de la façon dont il est facile de mélanger nos Boutons de la bibliothèque de la TUBERCULOSE: À l'aide des Boutons avec Twitter Bootstrap. Dans la pratique, encore une fois, vous auriez probablement souhaitez supprimer le buttons.less comprennent au total pour améliorer les performances, mais cela montre comment vous pouvez rendre les choses un peu moins "générique". Je n'ai pas fait cet exercice, encore moi, mais j'imagine que vous pourriez commencer par il vous suffit de commenter les lignes comme:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

Et puis recompiler à l'aide de `lessc à l'aide de l'un de vos propres boutons de modules. De cette façon, vous obtenez la bataille testés cœur de la TUBERCULOSE, mais pouvez toujours personnaliser les choses sans avoir recours à de grands remplacements. Il n'y a absolument aucune raison de ne pas utiliser seulement les pièces de la bibliothèque comme Bootstrap. Bien sûr, la même chose s'applique à la Sass version de la TUBERCULOSE

Vous pouvez changer la couleur d'arrière-plan et utiliser !important;

CSS:

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}