Изменение Bootstrap 4.1 .btn-outline-primary background при щелчке и активном?

Question

В настоящее время я использую кнопку Bootstrap 4.1 с классом .btn-outline-primary.В обычном состоянии кнопка имеет белый фон с синим текстом.Однако при наведении курсора на кнопку цвета инвертируются так, что фон становится синим, а текст - белым.

Активным состоянием этой кнопки является только выделенная граница (стилизация кнопки аналогична неактивному состоянию - белый фон с синим текстом), и я хотел бы сделать так, чтобы при нажатии кнопки кнопка оставаласьв том же стиле, что и при наведении на кнопку.

Однако у меня нет доступа к классу наведения кнопки, так как это кнопка начальной загрузки, и мне интересно, как мне этого добиться?Вот кнопка:

<button class='btn btn-outline-primary max-w-250 mx-1 my-1' type='button' id='MyButton' name='happyButton'>                                          
 <div class='d-flex flex-column justify-content-center align-items-center overflow-none'>                                                
  <div class='ButtonText line-height-16'>"Text Line One"</div>                                                                                                           
 </div>                                      
</button>

Я пытался использовать CSS-стили с использованием: focus, чтобы изменить цвет фона, однако, это просто приводит к чрезмерному усилению текста, так как текст не инвертируется, и фон теперь соответствуетцвет текста.

.btn-outline-primary:focus{
   background-color: #18f;
}

Answer 1

Я не большой пользователь Bootstrap, или я бы посмотрел соответствующие классы для вас.Вместо этого я проведу вас по шагам, чтобы найти их самостоятельно с помощью DevTools.Я буду использовать Chrome, но шаги аналогичны для Firefox и Safari.

1. В браузере (опять же, предпочтительно Chrome), где отображается кнопка, щелкните правой кнопкой мыши по этой кнопке.В меню выберите Inspect.

2. Окно, которое появляется, должно быть на вкладке элементов, отображающей ваш HTML.Убедитесь, что кнопка выделена на этом дисплее.Если это не так, щелкните HTML-код кнопки, чтобы выделить ее.

3. Правая сторона вновь открытого поля должна быть областью, описывающей выбранный элемент, и должна находиться в стилях.вкладка.Убедитесь, что правила CSS, которые вы ожидаете применить к кнопке, есть.

4. В верхней части этой панели, рядом с полем фильтра, есть небольшая кнопка с надписью:HOV.При нажатии на эту кнопку отображаются различные псевдоклассы, такие как: hover, которые можно применить к вашему элементу.Установите флажок: hover.

5. Правила: hover теперь должны отображаться в списке правил css ниже.Найдите соответствующее объявление (.btn-outline-primary: focus или что-то подобное) и скопируйте содержащиеся в нем правила.Затем вы можете в своем собственном CSS написать

.btn-outline-primary:active {
  [whatever rules you copied]
}

У меня есть два дополнения:

• Если это не такработать, повторите первые четыре шага, на этот раз выбрав: active псевдокласс.Если добавленные вами правила отображаются в вашем списке правил (они могут быть слишком устаревшими!), Но не работают, у вас есть проблема со спецификой CSS, и вы должны посмотреть, что
• Я написал это, предполагая, чтоКогда речь шла об активной кнопке, вы использовали термин в техническом смысле CSS, который является изменением, которое длится только до тех пор, пока кнопка удерживается.Если вы хотите, чтобы кнопка постоянно менялась после ее нажатия, вам нужно будет использовать что-то вне css: либо используйте Javascript для обновления классов на кнопке, либо измените ее и установите флажок