Jak zmienić kolor btn w Bootstrap

Czy istnieje sposób na zmianę wszystkich .btnwłaściwości w Bootstrap? Próbowałem poniżej, ale nadal czasami pokazuje domyślny niebieski kolor (powiedzmy po kliknięciu i usunięciu myszy itp.). Jak mogę całkowicie zmienić cały motyw?

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

Najłatwiejszym sposobem sprawdzenia, które właściwości należy nadpisać, jest przyjrzenie się kodowi źródłowemu Bootstrapa , a konkretnie miksowi.button-variant zdefiniowanemu w mixins / buttons.less . Trzeba jeszcze przesłonić sporo właściwości, aby pozbyć się wszystkich .btn-primarystylizacji (np :focus, disabledużycie w dropdowns etc).

Lepszym sposobem może być:

1. Stwórz własną, dostosowaną wersję Bootstrap, korzystając z internetowego narzędzia dostosowywania Bootstrap
2. Stwórz ręcznie własną klasę kolorów, np .btn-whatever
3. Użyj kompilatora LESS i użyj .button-variantmiksu do stworzenia własnej klasy kolorów, np.btn-whatever

Jeśli chcesz przesłonić jakiekolwiek domyślne właściwości w bootstrapie, musisz uczynić je tak ważnymi.

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

mam nadzieję, że to zadziała.

Aktualizacja 2019 dla Bootstrap 4

Teraz, gdy Bootstrap 4 używa SASS, możesz łatwo zmienić podstawowy kolor przycisku za pomocą button-variantmiksów:

$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://codeply.com/go/2bHYxYSC0n ( wersja demonstracyjna SASS )

Ten SASS kompiluje się do następującego 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://codeply.com/go/lD3tUE01lo ( demo CSS )

Aby zmienić kolor podstawowy dla wszystkich klas, zobacz: Dostosowywanie szablonu Bootstrap CSS i Jak zmienić kolor podstawowy Bootstrap?

Chyba zapomniałeś o .btn-primary:focuswłasności i przecinku po .btn-primary

Możesz także użyć less i przedefiniować niektóre kolory w pliku variable.less

Mając to na uwadze, twój kod będzie wyglądał następująco:

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

Po prostu utwórz własny przycisk na:

• http://blog.koalite.com/bbg/
• dodaj CSS na końcu twojego boottrap.min.css

Twoje zdrowie

Przegapiłeś jeden styl ".btn-primary: active: focus", który powoduje, że nadal podczas btn kliknięcie domyślnego koloru bootstrap pojawia się na sekundę. To działa w moim kodzie:

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

Usuń klasę koloru przycisku, na przykład „btn-success”, i umieść niestandardową klasę, na przykład „btn-custom”, i napisz css dla tej klasy. To po prostu działa dla mnie.

HTML :

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

CSS:

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

Najprostszym sposobem jest:

1) przechwycić każdy stan przycisku

2) dodaj, !importantaby zastąpić stany

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

Bardziej praktycznym sposobem interfejsu użytkownika jest przyciemnienie stanu najechania przycisku na ciemniejszy niż stan oryginalny:

.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;
}

Oto mój smak bez utraty zawisu. Osobiście podoba mi się to bardziej niż standardowe przejście bootstrap.

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

Ostatnio napotkałem podobny problem i udało mi się go naprawić dodając klasy

  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; }

Zwróć także uwagę na [disabled] i [disabled]: hover, jeśli ta klasa jest używana na wejściu [type = submit]. Lubię to:

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

Myślę, że używanie !importantnie jest zbyt mądrą opcją. Może to powodować wiele innych problemów, szczególnie podczas tworzenia responsywności witryny. Rozumiem więc, że najlepszym sposobem na to jest użycie niestandardowej klasy CSS przycisku z .btnklasą bootstrap. .btnjest podstawową klasą stylu dla przycisku bootstrap. Więc zachowaj to jako układ, możemy zmienić inne style za pomocą naszej niestandardowej klasy css. Jeszcze jedna dodatkowa rzecz, o której chcę tutaj wspomnieć. Niektórzy próbują usunąć niebieski kontur z przycisków. To nie jest dobry pomysł, ponieważ problem z dostępnością podczas korzystania z klawiatury. Zmień jego kolor, używając outline-color:zamiast tego.

Dodanie przewodnika krok po kroku do powyższej odpowiedzi @ Codeply-er dla początkujących użytkowników SASS / SCSS, takich jak ja.

1. Zapisz 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. Pobierz kompilator SASS, taki jak Koala , aby powyższy plik SCSS mógł zostać skompilowany do CSS.
3. Sklonować Bootstrap github repo ponieważ kompilator potrzebuje wstawek przycisk wariant gdzieś.
4. Jawnie zaimportuj funkcje ładowania początkowego, tworząc _bootstrap.scssplik jak poniżej. Umożliwi to kompilatorowi dostęp do funkcji i zmiennych Bootstrap.

@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. Skompiluj btnCustom.scssz wcześniej pobranym kompilatorem do css.

Nie jestem OP tej odpowiedzi, ale to mi pomogło:

Chciałem zmienić kolor następnych / poprzednich przycisków karuzeli bootstrap na mojej stronie głównej.

Rozwiązanie: Skopiuj nazwy selektorów z pliku bootstrap.css i przenieś je do własnego style.css (z własnymi preferencjami ...):

.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;
}

Możesz na przykład dodać niestandardowe kolory za pomocą motywów bootstrap w pliku konfiguracyjnym variables.scssi upewnić się, że importujesz ten plik przed załadowaniem podczas kompilacji.

$theme-colors: (
    "whatever": #900
);

Teraz możesz to zrobić .btn-whatever