Проблемы с дизайном Кнопки Bootstrap

Question

У меня возникли проблемы с кнопками стилизации в Bootstrap, и я надеюсь, что вы можете мне помочь.

Я пробовал это в скрипте JS, и у меня это работает, я хочу это here. Поэтому, когда я наводил курсор на кнопку, я становлюсь темно-синим, и когда я нажимаю на нее, я получаю тот же темно-синий цвет.

Однако, когда я просматриваю страницу в Firefox или Chrome, я нажимаю кнопку, появляется цвет по умолчанию (серый) для класса «btn-default». Я являюсь новичком, и из-за короткого времени обучения CSS и Bootstrap активный псевдо-класс предназначен для нажатия кнопки. Я попробовал переопределить это, используя это:

.btn-default.active, .btn-default:active{ 
    background-color: #1e3c89; 
    border-color: #1e3c89; 
} 

Любая идея, что я делаю неправильно?

EDIT: Благодарим за ответы. Я не уверен, что объясняю, чего я пытаюсь достичь правильно. Поэтому я опубликовал ссылку here, которая правильно иллюстрирует мою проблему (извинения за качество). Текущее состояние кнопки светло-голубое, когда я нахожу его темно-синим. Вы заметили, что кнопка затем становится серым, то есть когда я нажимаю кнопку. Когда я нажимаю кнопку, я хочу, чтобы она была тем же синим.

Answer 1

У вас одинаковые цвета для зависания и активного состояния.

Попробуйте изменить цвета для активного состояния

.btn-default.active, .btn-default:active { 
    background-color: #5e4c89; 
    border-color: #5e4c89; 
    color: #fff; 
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.5); 
} 

https://jsfiddle.net/rooo55nw/