Wording not appearing on button in HTML/ CSS - html

Question

I am creating a footer in HTML/CSS and I am trying to create an email form at the bottom of the footer. I have already created the button and form itself; however, the wording on the button does not appear.
Here is my HTML code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.footer-container {
background-color: #212329;
padding-bottom: 20px;
width: 80%;
height: 40vh;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.footer-container h4 {
color: #fff;
text-align: left;
text-shadow: 0.5px 0.5px gray;
}
.footer-container h6 {
color: #fff;
text-shadow: 0.5px 0.5px gray;
}
.footer-heading {
display: flex;
flex-direction: column;
margin-right: 4rem;
}
.footer-heading h6 {
color: #fff;
margin-bottom: 2rem;
}
.footer-heading a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer-heading a:hover {
color: darkgoldenrod;
transition: 0.5s ease-in-out;
}
.email-form h4 {
margin-bottom: 2rem;
}
#footer-email {
width: 250px;
height: 40px;
border-radius: 4px;
outline: none;
border: none;
padding-left: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
#footer-email::placeholder {
color: #b1b1b1;
}
#footer-email-btn {
width: 100px;
height: 40px;
border-radius: 4px;
background-color: darkred;
outline: none;
border: none;
color: #fff;
font-size: 1rem;
}
#footer-email-btn:hover {
cursor: pointer;
background-color: darkgoldenrod;
transition: all 0.4s ease-in-out;
}
<section class="footer-container">
<h4>Golden Lion Insurance Services</h4>
<div class="footer-heading">
<h6>About Golden Lion</h6>
About Rose
Rose Income Tax Services
</div>
<div class="footer-heading">
<h6>Services</h6>
Auto
Home
Truck
Health
Commercial
Life
Bonds
Annuities
</div>
<div class="footer-heading">
<h6>Resources</h6>
Blog
</div>
<div class="footer-heading">
<h6>Contact Us</h6>
</div>
<div class="footer-heading"></div>
<div class="email-form">
<h4>Get Your Latest Insurance Tips from Us!</h4>
<input type="email" placeholder="Enter your email here" id="footer-email">
<button type="submit" value="Sign Up!" id="footer-email-btn"></button>
</div>
</section>
Perhaps I may have missed some coding on the CSS, but the wording "sign up!" doesn't appear when I launch the code on my browser (I am using the current version of Google Chrome). Any help or pointers?
Thanks again!

Answer 1

The Problem seems to be in your HTML file on the 3rd line from the bottom.
When you declare a button, you need to mention some innerText in it.
For Example: <button> innerText </button>
Similarly for your code:
<button type="submit" value="Sign Up!" id="footer-email-btn">Sign Up!</button>

Answer 2

No worries, you only need to add some text inside the bottom tag.
Update your HTML button tag as the following
<button type="submit" value="Sign Up!" id="footer-email-btn">Submit</button>