How do I get .button:hover to not delete the content of the button when hovering over the button? - html

Question

When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>

Answer 1

I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>