Кнопка не может изменить цвет после нажатия

Question

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

Codepen

#msform .action-button, #msform .buttons { 
    text-align:center; 
    width: auto; 
    background: #27AE60; 
    font-weight: bold; 
    font-size: 14px; 
    color: white; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 5px; 
    cursor: pointer; 
    padding: 10px 5px; 
    margin: 10px 5px; 
    -moz-box-shadow: 1px 1px 5px #000000; 
    -webkit-box-shadow: 1px 1px 5px #000000; 
    box-shadow: 1px 1px 5px #000000;  
} 

Answer 1

Ошибка, которую вы сделали это с помощью :focus для выбора кнопки, после нажатия на кнопку, вы сосредоточены на кнопке выбора, и основное внимание будет по-прежнему, пока вы не нажмете на другой объект который меняет ваше внимание. Я бы порекомендовал вам прочитать this или использовать магию javascript для завершения вашей работы. Надеюсь, это поможет вам!

Answer 2

Ваш код меняет цвет кнопок на черный, когда он зависает или фокусируется. Итак, после того, как вы нажмете его и переместите курсор в другое место, фокус останется, пока вы не нажмете какой-либо другой элемент. Если вы хотите, чтобы он был черным только при наведении курсора, вы должны удалить #msform .action-button:focus и #msform .buttons:focus с вашего кода, что изменит цвет на черный.

(Ряды 75-77 в вашем Codepen)

#msform .action-button:hover, #msform .buttons:hover { 
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #273423; 
}