Блог

Здравствуйте, у меня проблемы с css. Когда я стилизую кнопку, вот код

 .green-button{
border: none;
background-color: rgba(78, 200, 129, 0.911);
border-radius: 3px; 
color: white;}


.green-button:hover{
background-color: rgb(228, 228, 228);
border-radius: 3px; 
color: rgba(83, 211, 104, 0.911);
opacity: 7;
transition: all 0.4s;}
 

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

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

Просто используйте :active псевдокласс, представляющий элемент (например, кнопку), который активируется пользователем. При использовании мыши «активация» обычно начинается, когда пользователь нажимает основную кнопку мыши. Из Mdn

 .green-button{
border: none;
background-color: rgba(78, 200, 129, 0.911);
border-radius: 3px; 
color: white;}


.green-button:hover{
background-color: rgb(228, 228, 228);
border-radius: 3px; 
color: rgba(83, 211, 104, 0.911);
opacity: 7;
transition: all 0.4s;}

.green-button:active{
background-color:red;
color:white} 

 <button class="green-button">Test</button>