So ändern Sie die Btn-Farbe in Bootstrap

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

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

ich hoffe, das funktioniert für Sie.

Ich denke, Sie haben .btn-primary:focus Eigenschaft und Komma nach .btn-primary vergessen

Sie können auch weniger Farben verwenden und einige Farben in der Datei variables.less neu definieren

In diesem Sinne wird Ihr Code so aussehen:

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

2018 Update für Bootstrap 4

Da Bootstrap 4 nun SASS verwendet, können Sie ändern Sie die primäre Farbe der Schaltflächen mit den button-variant mixins:

$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)

Diese SASS kompiliert sich in das folgende CSS ...

.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)

Um die Primärfarbe für alle -Klassen zu ändern, siehe: Anpassen der Bootstrap-CSS-Vorlage und Wie ändert man die Primärfarbe des Bootstraps?

Erstellen Sie einfach Ihren eigenen Button:

• 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-Klickens die Standard-Bootstrap-Farbe für eine Sekunde angezeigt wird . Dies 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;}

Ich hatte kürzlich ein ähnliches Problem und konnte es mit 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; }

Beachten Sie auch [disabled] und [disabled]: hover, wenn diese Klasse für die Eingabe [type = submit] verwendet wird. So was:

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

Entfernen Sie die Schaltfläche Farbklasse wie "BTN-Erfolg" und setzen Sie eine benutzerdefinierte Klasse wie "BTN-Benutzerdefiniert" 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;   
}

Ich denke, dass !important keine sehr kluge Option ist. Dies kann zu vielen anderen Problemen führen, insbesondere wenn die Site reaktionsfähig ist. Nach meinem Verständnis ist dies der beste Weg, um eine benutzerdefinierte Button-CSS-Klasse mit der .btn-Bootstrap-Klasse zu verwenden. .btn ist die Basisstilklasse für die Bootstrap-Schaltfläche. Behalten Sie dies als Layout bei, wir können andere Stile mit unserer benutzerdefinierten CSS-Klasse ändern. Noch etwas, was ich hier erwähnen möchte. Einige Leute versuchen, blaue Konturen von den Schaltflächen zu entfernen. Dies ist keine gute Idee, da dieses Problem bei der Verwendung der Tastatur auftritt. Ändern Sie die Farbe stattdessen mit outline-color:.

Hier ist mein Geschmack ohne Schwebeverlust. Mir persönlich gefällt es besser als der 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;
}