it-swarm.com.de

Ändern Sie die Hoverfarbe auf einer Schaltfläche mit der Bootstrap-Anpassung

Ich versuche, meine Tasten so zu gestalten, dass der Schwebeflug eine hellere Nuance als eine dunklere Nuance bewirkt. Ich habe die Bootstrap-Anpassungsseite ( http://getbootstrap.com/customize/ ) ausprobiert, und es gibt mir keine Option zum Ändern der Farbe des Schaltflächenhovers. Ich habe dies manuell versucht, indem ich das CSS inspizierte, aber es ist unklar, wie die Schaltflächen die Schwebefarbe erhalten. Ich habe eine andere Bootstrap-Anpassungswebsite ausprobiert

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

Ich wollte die Hauptfarbe # 0495c9 und die Schwebefarbe # 00b3db sein, aber ich kann nur die Farbe der Schaltfläche bg angeben und nicht die Schwebefarbe.

Jede Hilfe wird geschätzt

18

Die Farbe Ihrer Schaltflächen stammt aus den btn-x-Klassen (z. B. btn-primary, btn-success). Wenn Sie die Farben manuell ändern möchten, indem Sie Ihre eigenen benutzerdefinierten CSS-Regeln schreiben, müssen Sie Folgendes ändern:

/*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

Dies ist der richtige Weg, um die Farbe von BTN zu ändern.

 .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

oder kann das tun ...
Alle Btn-Stile (Klassenname wie: .btn- + $theme-colors: map-merge) gleichzeitig setzen:

@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"

sollte in Ihre Anpassungsscss-Datei einfügen.

0
Hel Lo