How to change the text color of a div on hover [duplicate]

Question

I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.

Here is my code:

p {
    margin: 0px;
}


.button {

    width: 66px;
    height: 20px;
    border: 2px black solid;
    border-radius: 4px;
    padding: 5px;

}

.button:hover {

    background-color: black;
    color: white;
}

a {

    color: black;
    text-decoration: none;   
}

a:hover {

    color: white;  
}

<div class="button">
    <p> <a href="https://www.google.com">  Click Me! </a> </p>
</div>

Answer 1

just change your a:hover to .button:hover a everything will look great. :>

p {
  margin: 0px;
}

.button {
  width: 66px;
  height: 20px;
  border: 2px black solid;
  border-radius: 4px;
  padding: 5px;
}

.button:hover {
  background-color: black;
  color: white;
}

a {
  color: black;
  text-decoration: none;
}

.button:hover a {
  color: white;
}

<div class="button">
  <p> <a href="https://www.google.com">  Click Me! </a> </p>
</div>