web-dev-qa-db-fra.com

Boutons de style Twitter

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

bootstrap button screenshot

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 suis absolument pas au courant de ce à quoi ressemble css/javascript que Twitter utilise pour maintenir ces effets.

cssbuttontwitter-bootstrap
94
Elias7

Fondamentalement, les boutons de Twitter Bootstrap sont contrôlés en CSS par ".btn {}". Ce que vous devez faire est d'aller dans le fichier CSS et trouver où il est écrit "btn" et changer les paramètres de couleur. Cependant, ce n'est pas aussi simple que cela car il faut également changer la couleur du bouton lorsque vous le mettez en surbrillance, etc. Pour ce faire, vous devez rechercher d'autres balises dans CSS, telles que ".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

25
Tanvir Ahmed

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

SASS Bootstrap 4-Alpha

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

Exemple de 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 MOINS

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 MOINS

Bootstrap 2.3 SASS

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

Il s'occupera du vol stationnaire/des actifs pour vous

A partir des commentaires, si vous souhaitez éclaircir le bouton au lieu d’être noirci lorsque vous utilisez le noir (ou si vous souhaitez simplement inverser), 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 Lighten Exemple

175
chrisan

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

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

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

27
Tran Cuong

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 fichier custom.css. 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;
}
22
Lilster

Au lieu de changer les valeurs CSS une par une, je suggérerais d'utiliser MOINS. Bootstrap a la 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éfinir la couleur une fois et LESS compile le fichier CSS qui modifie les valeurs globalement. Économise du temps et des efforts.

12
Petri Tuononen

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 listés, vous verrez les styles par défaut lors de l'exécution d'actions sur le bouton. Par exemple, une fois que vous avez cliqué sur le bouton et supprimé le pointeur de la souris du bouton, la couleur par défaut est visible. Ou maintenez le bouton enfoncé, vous verrez les couleurs par défaut. J'ai donc énuméré tous les pseudo-styles à remplacer.

12
Rahul Singh

Pour Bootstrap pour Sass remplacer c'est

.btn-default {

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

}

Vous pouvez voir la source ici: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/bootstrap/mix

9
Ari

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

5
Bass Jobsen

Voici un moyen très simple et efficace: Ajoutez le 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 bouton ou lien bootstrap:

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

Dans Twitter Bootstrap bootstrap 3.0.0, Le bouton Twitter est à plat. Vous pouvez le personnaliser à partir de http://getbootstrap.com/customize . Couleur des boutons, 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’apparence de démarrage et le style de ces ressources: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

3
Mujahidul Jahid

Je sais que c'est un fil plus ancien, mais juste pour ajouter une autre perspective. J'affirme que l'utilisation de substitutions est vraiment une odeur de code et va rapidement dégénérer pour des projets plus importants. Aujourd'hui, vous remplacez les boutons, les modaux de demain, le lendemain, les menus déroulants, etc., etc.

Je conseillerais d'essayer éventuellement de commenter l'inclusion pour buttons.less et de définir le mien, ou de trouver une autre bibliothèque de boutons plus adaptée à mon projet. Prise sans scrupule: voici un exemple de la facilité avec laquelle nous mélangeons notre bibliothèque de boutons avec TB: Utilisation de boutons avec Twitter Bootstrap . En pratique, encore une fois, vous voudrez probablement supprimer le buttons.less include pour améliorer les performances, mais cela montre comment 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 commenter des lignes telles que:

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 noyau de TB testé sur le combat, mais vous pouvez toujours personnaliser les éléments sans recourir à des dérogations majeures. Il n'y a absolument aucune raison de ne pas utiliser que des parties d'une bibliothèque comme Bootstrap. Bien sûr, la même chose s'applique à la version Sass de TB

1
Rob

Vous pouvez changer la couleur de fond 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;
}

0
Rafiqul Islam

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.

0
Luís Cruz