web-dev-qa-db-fra.com

Modifier la couleur de survol d'un bouton avec la personnalisation Bootstrap

J'essaie de styler mes boutons de manière à ce que le survol soit plus clair au lieu d'être plus foncé. J'ai essayé la page de personnalisation de bootstrap ( http://getbootstrap.com/customize/ ) et cela ne me donne pas la possibilité de changer la couleur de survol du bouton. J'ai essayé de le faire manuellement en inspectant le CSS, mais il est difficile de savoir comment les boutons obtiennent la couleur de survol. J'ai essayé un autre site de personnalisation de bootstrap

http://pikock.github.io/bootstrap-magic/app/#!/editor

Je voulais que la couleur principale soit # 0495c9 et que la couleur de survol soit # 00b3db mais je ne peux spécifier que la couleur du bouton bg et non sa couleur de survol.

Toute aide serait appréciée

htmlcssresponsive-designtwitter-bootstrap-3
18
Amir Shadaab Mohammed

La couleur de vos boutons provient des classes btn-x (par exemple, btn-primary, btn-success). Par conséquent, si vous souhaitez modifier manuellement les couleurs en écrivant vos propres règles CSS personnalisées, vous devez modifier:

/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
    color: #fff;
    background-color: #0495c9;
    border-color: #357ebd; /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #00b3db;
    border-color: #285e8e; /*set the color you want here*/
}
44
jme11

C'est la bonne façon de changer la couleur de BTN.

 .btn-primary:not(:disabled):not(.disabled).active, 
    .btn-primary:not(:disabled):not(.disabled):active, 
    .show>.btn-primary.dropdown-toggle{
        color: #fff;
        background-color: #F7B432;
        border-color: #F7B432;
    }
0
kamlesh.halduniya

ou peut le faire ...
définir tous les styles btn (nom de classe comme: .btn- + $theme-colors: map-merge) à la fois:

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value,
    // modify
    $hover-background: lighten($value, 7.5%),
    $hover-border: lighten($value, 10%),
    $active-background: lighten($value, 10%),
    $active-border: lighten($value, 12.5%)
    // /modify
    );
  }
}

// code from "node_modules/bootstrap/scss/_buttons.scss"

devrait ajouter dans votre fichier scss de personnalisation.

0
Hel Lo