HTML & CSS I just want the hover to change the colour of the button and the text.

[littlemoon]

This is the css code I have. The problem is that the change takes place separately, if i was to hover over just the button, it changes just the button to blue which makes the text invisible as its original colour is blue. I tried making the padding of the text bigger so that its the same size of the button so that difference doesn't occur but it shifts the position of the text which isn't good. I'm sure there is an easier way of doing this that I'm missing? Im new to this.

button {
    border: solid thin #071F4F;
    border-radius: 1%;
    padding: 2%;
    background-color:#CAD0D1;
    text-align: center;
    position: absolute;
    left: 38%;
    top: 60%;
    width: 18vw;
    font-size: 90%;
 
}

button a {
    color: #071F4F;
    text-decoration: none;
    letter-spacing: 1vw;
    padding: 5vh 20vh;
         
}

button a:hover {
    color:#CAD0D1;
    transition: 0.5s;
}

button:hover {
    background-color:#071F4F;
    transition: 0.5s;
}

 

[Tealk]

Replace:

button a:hover {
    color:#CAD0D1;
    transition: 0.5s;
}

with this:

button:hover a {
    color:#CAD0D1;
    transition: 0.5s;
}

 

[littlemoon]

Replace:

button a:hover {
    color:#CAD0D1;
    transition: 0.5s;
}

with this:

button:hover a {
    color:#CAD0D1;
    transition: 0.5s;
}

Thank you so much!!

 

[Malcolm]

Thank you so much!!

I see that @Tealk has helped you out with this one! He is very talented, you got great help! Don't forget to mark a post as the solution that helped you!