Button text has disappeared - html

Question

I am trying to create a form with a submit button. I am trying to apply some css to the button in a stylesheet, but for some reason the text has disappeared from the button!
When I remove all css from the stylesheet (or remove the id from the div) the button disappears completely instead of going to the default style. Could someone tell me what I am doing wrong?
HTML:
#submit
{
background-color: #5AB753;
color: black;
text-align: left;
border: none;
border-radius: 5px;
position: absolute;
left: 683px;
top: 500px;
width: 170px;
height: 51px;
font-family: 'Lato';
text-align: center;
font-size: 30px;
color: #FFFFFF;
float: left;
}
#submit:hover
{
background-color: #96D091;
float: left;
}
<div id="submit" type="submit" value="Join now" />

Answer 1

Use a button element instead of div.
Note that the default type for a button is submit, so you can remove that.
#submit {
background-color: #5AB753;
color: black;
text-align: left;
border: none;
border-radius: 5px;
position: absolute;
left: 683px;
top: 500px;
width: 170px;
height: 51px;
font-family: 'Lato';
text-align: center;
font-size: 30px;
color: #FFFFFF;
float: left;
}
#submit:hover {
background-color: #96D091;
float: left;
}
<button id="submit">Join now</button>
A Stackoverflow answer with good reasons to use button over input type="submit" can be found here: https://stackoverflow.com/a/33663114/5561605

Answer 2

use
#submit
{
background-color: #5AB753;
color: black;
text-align: left;
border: none;
border-radius: 5px;
position: absolute;
left: 683px;
top: 500px;
width: 170px;
height: 51px;
font-family: 'Lato';
text-align: center;
font-size: 30px;
color: #FFFFFF;
float: left;
}
#submit:hover
{
background-color: #96D091;
float: left;
}
<input id="submit" type="submit" value="Join now" />

Answer 3

Current:
<div id="submit" type="submit" value="Join now" />
Update html code with below code:
<input id="submit" type="submit" value="Join now" />