I've implemented these hover effects but for some reason, they are not working as expected. I'm struggling to understand why this is happening.
The primary button at the bottom is also experiencing the same issue.
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>