Jak zmienić kolor btn w Bootstrap

84

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;
}
Sam
źródło
Możesz po prostu utworzyć override_default.css i dołączyć go w bezpośrednim następnym wierszu do biblioteki bootstrap css, a następnie możesz nadpisać wszystko.
art-fan-vikram

Odpowiedzi:

31

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
ckuijjer
źródło
Ja również uważam, że stworzenie niestandardowej wersji Bootstrap powinno być idealnym sposobem, aby to osiągnąć, ponieważ może być wiele właściwości do zmiany. Dzięki.
Sam,
w kroku 3 - próbuję stworzyć LESS mixin przy użyciu .btn-primary, ale: hover nie działa. Jak mieszać stan najechania?
Yevgeniy Afanasjew
81

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.

Złota Perła
źródło
10
To !importantbył klucz!
cdonts
7
To nie jest dobry sposób na modyfikację Bootstrap, zmiany powinny być dokonywane za pomocą zmiennych Less lub Sass podczas budowania własnego niestandardowego Bootstrap CSS.
Tim
Jeśli po prostu połączysz się z bootstrapem przed połączeniem z niestandardowym arkuszem stylów, Twój niestandardowy arkusz stylów będzie miał pierwszeństwo.
dillon.harless,
42

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?

Zim
źródło
Ten post pomógł mi w stworzeniu fioletowego przycisku, jak widać na stronie głównej Bootstrap.
priyamtheone
A dla powolnych rozumnych, takich jak ja, zauważ, że musisz wykonać nadpisanie PO zaimportowaniu samego bootstrapa, ponieważ ten import zawiera rzeczy, które zamierzasz dołączyć i ponownie zdefiniować.
philw
34

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

Siemion Zhikharev
źródło
Następnie jest kolor obramowania, który nadal pozostaje niebieski. Myślę, że mniej jest sposobem na to, prawda?
Sam
Możesz również przedefiniować obramowanie.
Semyon Zhikharev
Musiałem też zmienić obraz tła, zanim zmienił kolor: background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%);lub background-image: none;.
SharpC
6

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;}
Stanislav Vincent
źródło
Widziałeś problem, którego nie zrobili inni, ale to go nie rozwiązuje.
Steve Lautenschlager
4

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;   
}
Manab Das
źródło
4

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;
}
GavinBelson
źródło
3

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>

clamchoda
źródło
1

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; }
Taika
źródło
0

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.

Tharanga
źródło
0

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);
}
  1. Pobierz kompilator SASS, taki jak Koala , aby powyższy plik SCSS mógł zostać skompilowany do CSS.
  2. Sklonować Bootstrap github repo ponieważ kompilator potrzebuje wstawek przycisk wariant gdzieś.
  3. 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";
  1. Skompiluj btnCustom.scssz wcześniej pobranym kompilatorem do css.
Adam
źródło
0

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

Nebisis
źródło
0

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

Salam
źródło