Глобально установленный цвет кнопки Bootstrap 4

Question

Я пытаюсь установить цвет кнопок Bootstrap 4.Именно я хочу изменить цвет btn-primary, удерживая нажатой кнопку мыши.Это должно быть какое-то событие кнопки, которое я должен раскрасить, но оно не выглядит как hover, focus или active.

В моих тестах я получил кнопку с классом btn-primary полностью красный, за исключением нажатия на него, при котором кнопка становится синей.Для создания CSS я использую Sass.

Мой файл app.scss:

.btn-primary {
    &:hover {
        color: red;
        background-color: red;
    }
    &:focus {
        color: red;
        background-color: red;
    }
    &:active {
        color: red;
        background-color: red;
    }
}

Как настроить цвет кнопки при нажатии на нее?

Answer 1

использовать с! Важно.

.btn-primary:hover {
  color: red;
  background-color: red !important;
}

.btn-primary:focus {
  color: red;
  background-color: orange !important;
}

.btn-primary:active {
  color: white;
  background-color: green !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary">Primary</button>

Или без использования! Важный:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.btn-primary:hover {
  color: white;
  background-color: red;
}

.btn-primary:focus {
  color: red;
  background-color: orange;
}

.btn-primary:not(:disabled):not(.disabled):active {
  color: white;
  background-color: green;
}
</style>
<button type="button" class="btn btn-primary">Primary</button>