Як змінити колір btn в Bootstrap

Чи є спосіб змінити всі .btnвластивості в Bootstrap? Я пробував наведені нижче, але все ж іноді він відображає синій колір за замовчуванням (скажімо, після натискання та видалення миші тощо). Як я можу змінити всю тему взагалі?

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

Найпростіший спосіб дізнатись, які властивості потрібно замінити, - це поглянути на вихідний код Bootstrap , зокрема на .button-variantміксин, визначений у mixins / buttons.less . Вам все одно потрібно замінити досить багато властивостей, щоб позбутися від усього .btn-primaryстилю (наприклад :focus,disabled , використання в випадають і т.д.).

Кращим способом може бути:

1. Створіть власну індивідуальну версію Bootstrap, використовуючи інструмент онлайн-налаштування Bootstrap
2. Вручну створіть свій власний клас кольорів, наприклад .btn-whatever
3. Використовуйте компілятор LESS і використовуйте .button-variantmixin для створення власного класу кольорів, наприклад.btn-whatever

Якщо ви хочете замінити будь-які властивості за замовчуванням у bootstrap, вам слід зробити властивості такими важливими.

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

Я сподіваюся, ця воля буде працювати для вас.

Оновлення 2019 для Bootstrap 4

Тепер, коли Bootstrap 4 використовує SASS, ви можете легко змінити основний колір кнопки, використовуючи button-variantкомбінації:

$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 ( демонстрація SASS )

Цей SASS компілюється в наступний 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 ( демонстрація CSS )

Щоб змінити основний колір для всіх класів, див .: Налаштування шаблону CSS Bootstrap та Як змінити основний колір bootstrap?

Я думаю, ви забули .btn-primary:focusвластивість та кому після .btn-primary

того, як Ви також можете використовувати менше і перевизначити деякі кольори у файлі variables.less.

З огляду на це, ваш код буде виглядати так:

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

Просто створіть свою власну кнопку на:

• http://blog.koalite.com/bbg/
• додайте CSS наприкінці з вашого boottrap.min.css

Ура

Ви пропустили один стиль ".btn-primary: active: focus", що призводить до того, що під час натискання кнопки btn колір завантаження за замовчуванням відображається на секунду. Це працює в моєму коді:

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

Видаліть клас кольору кнопки типу "btn-success" і поставте власний клас типу "btn-custom" та напишіть css для цього класу. Це просто працює для мене.

HTML :

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

CSS:

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

Найпростіший спосіб полягає в наступному :

1) перехоплення кожного стану кнопки

2) додати, !importantщоб замінити штати

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

Більш практичний спосіб інтерфейсу - зробити стан наведення кнопки темнішим за початковий стан:

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

Ось мій смак без втрати наведення. Мені особисто це подобається краще, ніж стандартний перехідний завантажувальний файл.

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

Нещодавно я стикався з подібною проблемою і встиг її виправити, додавши класи

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

Також зверніть увагу на [disabled] та [disabled]: наведення, якщо цей клас використовується на введенні [type = submit]. Подобається це:

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

Я думаю, що використання !important- не дуже мудрий варіант. Це може спричинити багато інших проблем, особливо коли сайт відповідає. Отже, наскільки я розумію, найкращий спосіб це зробити, використовуючи спеціальний клас CSS-класу з .btnкласом bootstrap. .btnє базовим класом стилю для кнопки завантаження. Отже, пам’ятайте, що як макет ми можемо змінювати інші стилі, використовуючи наш власний клас css. Ще одне зайве, що я хочу тут згадати. Деякі люди намагаються видалити синій контур з кнопок. Це не гарна ідея, оскільки ця проблема доступності при використанні клавіатури. Змініть його колір, використовуючи outline-color:замість цього.

Додавання покрокового керівництва до відповіді @ Codeply-er вище для початківців SASS / SCSS, таких як я.

1. Зберегти 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. Завантажте компілятор SASS, такий як Koala, щоб наведений вище файл SCSS можна було скомпілювати в CSS.
3. Клонування Bootstrap GitHub репо , тому що компілятор потребує ґудзиках варіантні Домішки де - то.
4. Явно імпортуйте функції завантаження, створюючи _bootstrap.scssфайл, як показано нижче. Це дозволить компілятору отримати доступ до функцій і змінних 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. Скомпілюйте btnCustom.scssз раніше завантаженим компілятором у css.

Я не відповідаю за цю відповідь, але мені це допомогло:

Я хотів змінити колір наступної / попередньої кнопок каруселі початкового завантаження на домашній сторінці.

Рішення: Скопіюйте імена селекторів із bootstrap.css та перемістіть їх у свій власний style.css (із власними преференціями ..):

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

Ви можете додати власні кольори, використовуючи тему завантаження у вашому конфігураційному файлі, variables.scssі переконайтесь, що ви імпортуєте цей файл перед завантаженням під час компіляції.

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

Тепер ви можете це зробити .btn-whatever