Button hover doesnt do anything - html

Question

I have these hover effects set up and it doesn't seem to be changing a thing. I can't figure out why.
Same thing happens with the primary button at the bottom.
body { background-color: #aaa }
.button {
background: #fff;
border-radius: 5px;
border: none;
padding: 5px;
width: 100px;
height: 50px;
}
.button:hover {
background: #1c1c1c;
color: #fff;
transition: 0.3s ease;
cursor: pointer;
}
.button-primary {
background: yellow;
border-radius: 5px;
border: none;
padding: 5px;
width: 100px;
height: 50px;
margin-bottom: 10px;
}
.button-primary:hover {
background: #1c1c1c;
transition: 0.3s ease;
}
.button-down {
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid white;
background: transparent;
color: white;
}
.button-down:hover {
background: white;
color: #1c1c1c;
border: 1px solid #1c1c1c;
cursor: pointer;
}
<div>
<div class="down">
<button class='button-down'><i class='fas fa-arrow-down'></i></button>
</div>
<input type="text" name='email' id='email' placeholder='signup to our newsletter...'>
<br>
<button class='button-primary' type='submit' name='submit'>Submit</button>
</div>

Answer 1

You linked your stylesheet to your html?
Also, .button-down class in is not declared in css but instead you have .button
Replace .button with .button-down and try again.
.button-down{
background: #fff;
border-radius: 5px;
border: none;
padding: 5px;
width: 100px;
height: 50px;
}
.button-down:hover{
background: #1c1c1c;
color: #fff;
transition: 0.3s ease;
cursor: pointer;
}