Styliser les boutons d'amorçage Twitter

Les boutons Twitter-Bootstrap sont incroyablement beaux. Essayez-les en les faisant défiler

Mais ils sont limités en couleurs.

Est-il possible de changer la couleur de base du bouton tout en conservant le bel effet de survol que le bootstrap a rendu si beau et sans effort?

Je ne sais pas du tout à quoi ressemble le css / javascript que Twitter utilise pour maintenir ces effets.

Fondamentalement, les boutons de Twitter Bootstrap sont contrôlés en CSS par ".btn {}". Ce que vous avez à faire est d'aller dans le fichier CSS et de trouver où il est dit "btn" et de modifier les paramètres de couleur. Cependant, ce n'est pas aussi simple que de le faire puisque vous devez également changer la couleur du bouton lorsque vous le mettez en surbrillance, etc. Pour ce faire, vous devez rechercher d'autres balises dans CSS comme ".btn: hover {} ", etc.

Le changer nécessite de changer le CSS. Voici un lien rapide vers ce fichier:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

J'ai trouvé que le moyen le plus simple est de mettre cela dans vos remplacements. Désolé pour mon choix de couleur sans imagination

Bootstrap 4-Alpha SASS

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

Exemple Bootstrap 4 Alpha SASS

Bootstrap 3 MOINS

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

Exemple Bootstrap 3 LESS

Bootstrap 3 SASS

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

Exemple Bootstrap 3 SASS

Bootstrap 2.3 MOINS

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

Exemple Bootstrap 2.3 LESS

Bootstrap 2.3 SASS

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

Il s'occupera du survol / des actifs pour vous

À partir des commentaires, si vous souhaitez éclaircir le bouton au lieu de l'assombrir lorsque vous utilisez du noir (ou si vous voulez simplement inverser), vous devez étendre un peu plus la classe comme ceci:

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
  }
}

Exemple Bootstrap 3 SASS Lighten

Vous pouvez écraser les couleurs dans votre css, par exemple pour le bouton Danger:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Voici une bonne ressource: http://charliepark.org/bootstrap_buttons/

Vous pouvez changer de couleur et voir l'effet en action.

Si vous chargez déjà votre propre fichier CSS personnalisé après le chargement de bootstrap.css (version 3), vous pouvez ajouter ces 2 styles CSS à votre custom.css et ils remplaceront les valeurs par défaut de bootstrap pour le style de bouton par défaut.

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

Au lieu de changer les valeurs CSS une par une, je suggérerais d'utiliser LESS. Bootstrap a une version MOINS sur Github: https://github.com/twbs/bootstrap

LESS vous permet de définir des variables pour changer les couleurs, ce qui le rend beaucoup plus pratique. Définissez la couleur une fois et LESS compile le fichier CSS qui modifie les valeurs globalement. Économise du temps et des efforts.

Afin de remplacer complètement les styles de bouton d'amorçage, vous devez remplacer une liste de propriétés. Voir l'exemple ci-dessous.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

Si vous n'utilisez pas tous les styles répertoriés, vous verrez les styles par défaut lors de l'exécution d'actions sur le bouton. Par exemple, une fois que vous cliquez sur le bouton et retirez le pointeur de la souris du bouton, vous verrez la couleur par défaut visible. Ou maintenez le bouton enfoncé, vous verrez les couleurs par défaut. J'ai donc répertorié tous les pseudo-styles à remplacer.

Pour Bootstrap for Sass override c'est

.btn-default {

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

}

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

Ou essayez http://twitterbootstrapbuttons.w3masters.nl/ . Il crée des css pour les boutons basés sur une entrée de couleur html. Ajoutez le css après le bootstrap css. Il propose trois styles de boutons (clair, foncé et spin).

Voici un moyen très simple et efficace: ajoutez dans votre CSS 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 bouton ou lien bootstrap:

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

Dans le bootstrap de Twitter Bootstrap 3.0.0, le bouton Twitter est plat. Vous pouvez le personnaliser à partir de http://getbootstrap.com/customize . Couleur du bouton, bordure radieuse etc.

Vous pouvez également trouver le code HTML et d'autres fonctionnalités http://twitterbootstrap.org/bootstrap-css-buttons .

Le bouton Bootstrap 2.3.2 est dégradé mais 3.0.0 (nouvelle version) plat et semble plus cool.

et vous pouvez également trouver pour personnaliser l'ensemble de l'apparence et du style du bootstrap à partir de ces ressources: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Je sais que c'est un fil plus ancien, mais juste pour ajouter une autre perspective. J'affirmerais que l'utilisation des remplacements est vraiment un peu une odeur de code et va rapidement devenir incontrôlable sur les projets plus importants. Aujourd'hui, vous remplacez les boutons, les modaux de demain, le lendemain, les menus déroulants, etc., etc.

Je vous conseillerais d'essayer éventuellement de commenter l'inclusion pour buttons.lesset de définir la mienne, ou de trouver une autre bibliothèque de boutons plus adaptée à mon projet. Plug sans vergogne: voici un exemple de la facilité avec laquelle il est de mélanger notre bibliothèque de boutons avec TB: Utilisation de boutons avec Twitter Bootstrap . En pratique, encore une fois, vous voudrez probablement supprimer buttons.lesscomplètement l' inclusion pour améliorer les performances, mais cela montre comment vous pouvez rendre les choses un peu moins «génériques». Je n'ai pas encore fait cet exercice moi-même mais j'imagine que vous pourriez commencer par simplement commenter des lignes comme:

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

Et puis recompiler en utilisant `lessc en utilisant l'un de vos propres modules de boutons. De cette façon, vous obtenez le cœur de TB testé au combat, mais vous pouvez toujours personnaliser les choses sans recourir à des remplacements majeurs. Il n'y a absolument aucune raison de ne pas utiliser uniquement des parties d'une bibliothèque comme Bootstrap. Bien sûr, il en va de même pour la version Sass de TB

Pour Bootstrap (au moins pour la version 3.1.1) et LESS, vous pouvez utiliser ceci:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

Ceci est défini dans bootstrap/less/buttons.less.

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

.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;
}