So ändern Sie die BTN-Farbe in Bootstrap

Gibt es eine Möglichkeit, alle .btnEigenschaften in Bootstrap zu ändern ? Ich habe unten versucht, aber manchmal zeigt es immer noch die standardmäßige blaue Farbe (etwa nach dem Klicken und Entfernen der Maus usw.). Wie kann ich das gesamte Thema insgesamt ändern?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

Der einfachste Weg, um zu sehen, welche Eigenschaften Sie überschreiben müssen, besteht darin, sich den Quellcode von Bootstrap anzusehen , insbesondere das .button-variantin mixins / button.less definierte Mixin . Sie müssen noch eine ganze Reihe von Eigenschaften außer Kraft zu setzen all das loswerden .btn-primaryStyling (zB :focus, disabled, Verwendung in Dropdown - Listen usw.).

Ein besserer Weg könnte sein:

1. Erstellen Sie Ihre eigene angepasste Version von Bootstrap mit dem Online-Anpassungstool von Bootstrap
2. Erstellen Sie manuell Ihre eigene Farbklasse, z .btn-whatever
3. Verwenden Sie einen WENIGER Compiler und verwenden Sie das .button-variantMixin, um Ihre eigene Farbklasse zu erstellen, z.btn-whatever

Wenn Sie Standardeigenschaften in Bootstrap überschreiben möchten, müssen Sie die Eigenschaften als wichtig festlegen.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

Ich hoffe, das wird für Sie funktionieren.

2019 Update für Bootstrap 4

Jetzt, da Bootstrap 4 SASS verwendet, können Sie die Farbe der primären Schaltfläche mithilfe der button-variantMixins einfach ändern :

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/2bHYxYSC0n ( SASS-Demo )

Dieser SASS wird in folgendes CSS kompiliert ...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://www.codeply.com/go/lD3tUE01lo ( CSS-Demo )

Informationen zum Ändern der Primärfarbe für alle Klassen finden Sie unter: Anpassen der Bootstrap-CSS-Vorlage und Ändern der Bootstrap-Primärfarbe?

Ich denke, Sie haben die .btn-primary:focusEigenschaft und das Komma vergessen, nachdem .btn-primary

Sie auch weniger verwendet und einige Farben in der Datei variables.less neu definiert haben.

In diesem Sinne sieht Ihr Code folgendermaßen aus:

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

Erstellen Sie einfach Ihre eigene Schaltfläche auf:

• http://blog.koalite.com/bbg/
• Fügen Sie das CSS am Ende Ihrer boottrap.min.css hinzu

Prost

Sie haben einen Stil ".btn-primary: active: focus" verpasst, der dazu führt, dass während des BTN-Klicks noch eine Sekunde lang die Standard-Bootstrap-Farbe angezeigt wird. Das funktioniert in meinem Code:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

Entfernen Sie die Schaltflächenfarbklasse wie "btn-success" und fügen Sie eine benutzerdefinierte Klasse wie "btn-custom" ein und schreiben Sie CSS für diese Klasse. Das funktioniert einfach bei mir.

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

Der einfachste Weg ist:

1) jeden Tastenzustand abfangen

2) Hinzufügen !important, um die Zustände zu überschreiben

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  border-color: black !important;
}

Die praktischere Methode für die Benutzeroberfläche besteht darin, den Schwebezustand der Schaltfläche dunkler als den ursprünglichen Zustand zu machen:

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

Hier ist mein Geschmack ohne den Verlust von Schwebeflug. Ich persönlich mag es besser als den Standard-Bootstrap-Übergang.

.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: #8064A2 !important;
}

.btn-primary:hover {
  background-color: #594671 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

Ich war kürzlich auf ein ähnliches Problem gestoßen und konnte es durch Hinzufügen von Klassen beheben

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

Achten Sie auch auf [deaktiviert] und [deaktiviert]: Hover, wenn diese Klasse bei der Eingabe verwendet wird [Typ = Senden]. So was:

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Ich denke, die Verwendung !importantist keine sehr kluge Option. Dies kann zu vielen anderen Problemen führen, insbesondere wenn die Site reagiert. Meines Wissens nach ist dies der beste Weg, um die CSS-Klasse für benutzerdefinierte Schaltflächen mit der .btnBootstrap-Klasse zu verwenden. .btnist die Basisstilklasse für die Bootstrap-Schaltfläche. Behalten Sie also das Layout bei, wir können andere Stile mithilfe unserer benutzerdefinierten CSS-Klasse ändern. Noch eine zusätzliche Sache, die ich hier erwähnen möchte. Einige Leute versuchen, blaue Umrisse von den Schaltflächen zu entfernen. Es ist keine gute Idee, da dieses Problem mit der Barrierefreiheit bei der Verwendung der Tastatur auftritt. Ändern Sie outline-color:stattdessen die Farbe mit .

Hinzufügen einer Schritt-für-Schritt-Anleitung zu der obigen Antwort von @ Codeply-er für SASS / SCSS-Neulinge wie mich.

1. Speichern btnCustom.scss.

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

.btn-custom {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-custom {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

2. Laden Sie einen SASS-Compiler wie Koala herunter, damit die obige SCSS-Datei zu CSS kompiliert werden kann.
3. Klonen Sie das Bootstrap- Github-Repo, da der Compiler irgendwo die Mixins der Button-Variante benötigt.
4. Importieren Sie Bootstrap-Funktionen explizit, indem Sie eine _bootstrap.scssDatei wie folgt erstellen . Dadurch kann der Compiler auf die Bootstrap-Funktionen und -Variablen zugreifen.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

5. Kompilieren Sie btnCustom.scssmit dem zuvor heruntergeladenen Compiler nach CSS.

Ich bin nicht der OP dieser Antwort, aber es hat mir so geholfen:

Ich wollte die Farbe der nächsten / vorherigen Schaltflächen des Bootstrap-Karussells auf meiner Homepage ändern.

Lösung: Kopieren Sie die Selektornamen aus bootstrap.css und verschieben Sie sie in Ihre eigene style.css (mit Ihren eigenen Einstellungen ..):

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}