Css - How to have my button make a clicking effect when I click It

Question

Hello I am having trouble with css. When I am styling a button here is the code

.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;}

The problem is when I am clicking the button It just stays the same. the button does not go a darker green or a lighter green.

I have been looking around on other websites and I have not found any details when I go on regular sites I mostly check on to get my information. If you know anything I can try please let me know.

Answer 1

Just use :active pseudoclass, represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button. From 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>