Unable to get a link class to change on hover - html

Question

So I have a link within a button that has a class assignment. The link class dictates color however on hover does not shift as instructed. Can someone help me find a solution to fix?
Here is the HTML...
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class = "button1">Apply for a Vehicle Loan</button>
</div>
And here is the CSS...
.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.apply {
color: #3d4e3b;
}
.apply:hover span{
color: white;
}

Answer 1

Here you are:
.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.apply {
color: #3d4e3b;
}
.button1:hover .apply {
color: white;
}
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class="button1">Apply for a Vehicle Loan
</button>
</div>

Answer 2

.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
color: #3d4e3b;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
color: #b5cfc1;
}
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class="button1">Apply for a Vehicle Loan</button>
</div>
Luke your answer worked for the coloring but the link was then broken. After working through it I found a solution that both allows for the link to follow style and still remain functional. See below...
<div class="row block well" id="section5">
<h1 style="text-align:center">Financing</h1>
<button class="button1">Apply for a Vehicle Loan</button>
</div>
.button1 {
display: block;
background-color: white;
font-size: 30px;
border: 4px solid #b5cfc1;
border-radius: 10px;
margin: 0 auto;
color: #3d4e3b;
}
.button1:hover {
background-color: #3d4e3b;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
color: #b5cfc1;
}
First, I needed to nest the button in the link rather than the other way around. This allows for the entire button to be a link. Next, because the button was now nested in the link I could create style for the inner element (button) rather than trying to stylize the parent and than style the child which was causing a conflict. Endless thanks to everyone that contributed to finding a complete solution, unfortunately some answers have been removed so I cannot attribute individually, but it was all instrumental. Cheers!