Кнопка загрузки при щелчке по умолчанию.

Ответ 1

Селектор :active - это то, что вам нужно для клика.

.btn-sample:active {
  // click styles here
}

Похоже, что у вас есть это выше, поэтому, если вы все еще видите немного другой цвет, это скорее всего из-за box-shadow, который также применяется к состоянию кнопки active. Отключите это так:

.btn-sample:active {
  box-shadow: none;
}

Изменить: Селектор, который переопределяет ваш css, на самом деле btn-success:active:focus. Поэтому вам нужно добавить следующее к вашему css:

.btn-success:active:focus {
  color: #ffffff; 
  background-color: #161617; 
  border-color: #494F57;
}

В дополнение к моему комментарию ниже вам будет лучше создать свой собственный класс, например btn-custom, к которому вы можете применить свои желаемые стили. Объединив это с существующим классом btn, вы можете достичь желаемого результата с гораздо меньшим количеством кода, так как вам не нужно будет переопределять существующие селектора.

Ответ 2

Чтобы сделать это, вы должны использовать объявление !important.

.btn-success:hover, .btn-success:active, .btn-success:focus {
  color: #ffffff !important;
  background-color: #1F2838 !important;
  border-color: #494F57 !important;
}

Ответ 3

Просто добавьте следующий код в свой CSS

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617; 
border-color: #494F57; 
}

Ответ 4

Некоторое вдохновение из источника начальной загрузки для переопределения этих различных состояний кнопок, в которых определены $нечеткие и $black-black:

.btn-success {
  &:hover,
  &:focus,
  &.focus {
    color: $off-white;
    background-color: $brand-black;
  }

  &:active,
  &.active,
  &.disabled,
  &:disabled {
    color: $off-white;
    background-color: $brand-black;

    &:focus,
    &.focus {
      color: $off-white;
      background-color: $brand-black;
    }
  }
}

Ответ 5

Если вы работаете над личным проектом, а не с командой, стоит отметить, что вы можете переопределить стили псевдо класса, просто применив "! important" к тем же объявлениям стиля в классе:

.btn-success { color: #ffffff !important; background-color: #161617 !important; border-color: #494F57 !important; }

Как правило, это хорошая идея, чтобы держаться подальше от! важно, потому что это переопределит любые объявления стиля цвета, фона и цвета в стиле btn-success (если вы не переопределите декларации стиля снова с! important позже в вашей таблице стилей, хотя это смешно).

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

В качестве альтернативы, но используя одно и то же мышление, вы можете попробовать называть новый пользовательский класс, что-то вроде .btn-success-important, и применять его только после btn-success, где вам нужно использовать переопределение.

Есть один улов: если вы комбинируете .btn-success или ваш .btn-success-important с любой другой загрузочной .btn-group,! important переопределит любой стиль псевдокласса, объявленный внутри. В этом случае вам может быть лучше с ответом Ги (пользовательский класс без! Важных деклараций стиля).

Ответ 6

Эта кнопка нажимает анимацию цвета по умолчанию из-за фонового изображения. Используйте это для каждого именованного стиля (btn-default, btn-success и т.д.):

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}