How to change the background of a button with a link on hover-CodePudding

I have a button with a link within it. I want the button's background color and the link's text color to change when I hover over the button. However, I can't get the link's color to change when I hover over the button, only when I hover over the link. Here's what I have.

button {
   background-color: navy;
   padding: 1%;
   font-size: 16px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   border: 4px inset darkgrey;
}
button a {
   color: white;
   text-decoration: none;
   font-weight: bold;
}
button a:hover {
   color: navy;
}
button:hover {
   background-color: white;
}

<button><a href="random.html">Lorem ipsum</a></button>

Thanks!

CodePudding user response：

It was not very complicated, like gift!

button {
   background-color: navy;
   padding: 1%;
   font-size: 16px;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   border: 4px inset darkgrey;
}
button a {
   color: white;
   text-decoration: none;
   font-weight: bold;
}
button:hover {
   background-color: white;
}
button:hover a {
   color: navy;
}

<button><a href="random.html">Lorem ipsum</a></button>

CodePudding user response：

Someone answered this and deleted it, but it worked:

button:hover a {
    color: navy;
}

CodePudding user response：

As said by other users, you shouldn't place a link inside a button. If you need the button to open another page you could place the button inside a form and specify the destination on the action, like this:

<form action="random.html">
    <button>Lorem ipsum</button>
</form>