Stylisation des boutons twitter bootstrap

Question

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

Mais ils sont limités en couleurs.

Existe-t-il un moyen de modifier la couleur de base du bouton tout en conservant le magnifique effet de survol que bootstrap a rendu si beau et si facile ?

Je ne sais absolument pas à quoi ressemblent les css/javascript que twitter utilise pour maintenir ces effets.

Answer 1

J'ai trouvé que le moyen le plus simple est de mettre cela dans vos surcharges. Désolé pour mon choix de couleurs peu imaginatif.

Bootstrap 3 LESS

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

Exemple de 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 de Bootstrap 3 SASS

Bootstrap 2.3 LESS

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

Exemple de Bootstrap 2.3 LESS

Bootstrap 2.3 SASS

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

Il s'occupera des survols/actifs pour vous.

Answer 2

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

Answer 3

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

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

Answer 4

En fait, les boutons de Twitter Bootstrap sont contrôlés en CSS par ".btn{}". Il suffit d'aller dans le fichier CSS, de trouver l'emplacement de " btn " et de modifier les paramètres de couleur. Cependant, ce n'est pas aussi simple que cela, car vous devez également modifier la couleur du bouton lorsque vous le mettez en évidence, etc. Pour ce faire, vous devez rechercher d'autres balises dans le fichier CSS comme ".btn:hover{}", etc.

Pour le modifier, il faut changer le CSS. Voici un lien rapide vers ce fichier :

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

Answer 5

Si vous chargez déjà votre propre fichier CSS personnalisé après avoir chargé bootstrap.css (version 3), vous pouvez ajouter ces deux 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;
}