How do I use an :active pseudo-class in CSS properly?

I tried my method here,

.Subscribe-button:hover {
  background-color : rgba(150, 0, 0, 0.917); 
  transition       : background-color 1s;
  }
.Subscribe-button:active {
  background-color : black;
  }

and it works but you have to hold your mouse click for the event to happen and I want to make the transition activate only for the hover.
P.S. I’m new to HTML and CSS and this is just a sample of the code I used.

>Solution :

Since it’s the same transition selector and same element it will animate. One way to do that is to add a pseudo-element to the button and change the color of that one for :active instead. Here is how:

.Subscribe-button:hover {
  background-color : rgba(150, 0, 0, 0.917); 
  transition       : background-color 1s;
}

.Subscribe-button{
  position:relative
}

.Subscribe-button:before{
  content: '';
  display:block;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  z-index:0
}
.Subscribe-button:active:before {
  background-color : black;
}

<div class="Subscribe-button">Press Me</div>