Problem with button and link style in it?

Question

css

The bottom line is this: there is a link inside the button.
a) If you click on the text itself (which is inside the button), then the text becomes white and the background black.
b) If you click on the area around the text (the button is pretty big), then the text remains black, and the background also becomes black.
You need to make sure that when you click on any area of ​​the button, the text becomes white.
I 'm attaching a screenshot:

And the code:

.btn_up { 
  width: 100px;
  height: 50px;
  display: inline-block;
  user-select: none;
  padding: .5em .2em;
  background-color: rgba(128, 128, 128, 0.5);
  border: 2px solid;
  border-radius: 1px;
  outline: none;
  text-decoration: none;
  font-weight: 700;
  color: white;
  transition: 0.2s;
}

.btn_up:hover { 
  background: rgba(128,128,128,0.8);
}

.btn_up:active { 
  background: white; color: black;
}

.btn_up a { 
  user-select: none;
  outline: none;
  text-decoration: none;
  font-weight: 700;
  color: white;
  font-size: 10px;
}

.btn_up a:hover {
  color: white;
}

.btn_up a:active {
  color: black;
}

Tell me, please, what is the problem.

Answer 1

Replace

.btn_up a:hover {
  color: white;
}

On the

.btn_up:hover a{
  color: white;
}