Как поменять цвет кнопки в состоянии mousedown

Question

Я поменял цвет при наведении мыши, при фокусе, но не могу поменять стандартный (синий) цвет, когда нажимаешь на кнопку, но клавишу не отпускаешь. Как я понял это состояние называется mousedown. По логике это решается просто чистым css

            <Button
              type='submit'
              disabled={isSubmitting}
              className='auth-button'
              onClick={() => {
                setLogInWindow(false)
              }}
            >Войти</Button>

Answer 1

Вот так

button {
  background-color: red;
}

button:active {
  background-color: green;
}

<button>Button</button>

Answer 2

В общем проблема была в том, что кнопка из react-bootstrap и на нее был почему-то наложен стиль primary, который и давал синий цвет и не давал себя перебить. Проблему решил изменив этот стиль:

    button.auth-button.btn.btn-primary:active {
      background-color: #fbe200;
    }

БЛОГ НА HUSL

Как поменять цвет кнопки в состоянии mousedown

Ответы (2 шт):