Активное изменение цвета кнопки Bootstrap Button

Я использую класс кнопки bootstrap, а точнее следующее:

<button type="button" class="btn btn-success navbar-btn">Login</button>

Прямо сейчас, цвет показывает зеленый, что хорошо. Каждый раз, когда я нажимаю кнопку, кнопка переходит в темный оттенок зеленого. Я хочу сделать так, чтобы кнопка не меняла цвет, но оставалась только цветом начальной загрузки, а также удаляла синий контур вокруг него.

Для синего контура я попытался установить контур на нет, но по какой-то причине он не работал. Я знаю, что мы должны использовать

.btn : active:focus {

}

Но я не знаю цвета по умолчанию для кнопки успешной загрузки, поэтому мне трудно понять, как это сделать.

Ответ 1

Цвет btn-success по умолчанию # 5cb85c. Все, что вам нужно сделать, это проверить его с помощью DevTools или выполнить поиск в таблице стилей загрузки, чтобы найти все правила, относящиеся к этому классу, и изменить все, что вам нужно, в вашей собственной таблице стилей, чтобы переопределить их. Нет необходимости использовать !important вообще, специфика - ваш друг. См. Спецификация MDN.

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

.btn.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.btn.btn-success.focus,
.btn.btn-success:focus {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}
.btn.btn-success:hover {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}
.btn.btn-success.active,
.btn.btn-success:active {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
}
.btn.btn-success.active.focus,
.btn.btn-success.active:focus,
.btn.btn-success.active:hover,
.btn.btn-success:active.focus,
.btn.btn-success:active:focus,
.btn.btn-success:active:hover {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <button type="button" class="btn btn-success navbar-btn">Changed BTN</button>
      <button type="button" class="btn btn-info navbar-btn">Default BTN</button>
    </div>
  </div>
</nav>

Ответ 2

Я взял оригинальные настройки стиля для btn-success и заметил, что есть четыре цвета. Я извлек их и повернул оттенки. Затем я заменил все соответствующие цвета.

/**

Original colors
===============
#28a745
#218838 <-- rgba(40, 167, 69, 0.5)
#1e7e34
#1c7430

Updated colors
===============
#8a458f
#703975 <-- rgba(112, 57, 117, 0.5)
#69346c
#613064

*/

.btn.btn-success {
  color: #ffffff;
  background-color: #8a458f;
  border-color: #8a458f;
}
.btn.btn-success:hover {
  color: #ffffff;
  background-color: #703874;
  border-color: #69346d;
}
.btn.btn-success:focus, .btn.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}
.btn.btn-success.disabled, .btn.btn-success:disabled {
  color: #ffffff;
  background-color: #8a458f;
  border-color: #8a458f;
}
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active {
  color: #ffffff;
  background-color: #69346d;
  border-color: #613064;
}
.show > .btn.btn-success.dropdown-toggle {
  color: #ffffff;
  background-color: #69346d;
  border-color: #613064;
}
.show > .btn.btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}
.btn.btn-success:not(:disabled):not(.disabled):active:focus,
.btn.btn-success:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">NavBar</a>
      <button type="button" class="btn btn-success navbar-btn">Modified Button</button>
      <button type="button" class="btn btn-info navbar-btn">Regular Button</button>
    </div>
  </div>
</nav>