Button text has disappeared

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" />

sol · Accepted Answer · 2017-10-10T16:04:29.593

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

Of course, it was as easy as that. I shall mark this as an answer asap (can't do it yet because of this time limit) — , Oct 10 '17 at 16:03

score 0 · Answer 2 · edited Oct 10 '17 at 20:29

0

Current:

<div id="submit" type="submit" value="Join now" />

Update html code with below code:

<input id="submit" type="submit" value="Join now" />

edited Oct 10 '17 at 20:29

Don't Panic

13,965
5
32
51

answered Oct 10 '17 at 16:00

Ankit Awasthi

36
4

2

Thank you for this code snippet, which may provide some immediate help. A proper explanation [would greatly improve](https://meta.stackexchange.com/q/114762) its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply. – GrumpyCrouton Oct 10 '17 at 16:52

score 0 · Answer 3 · answered Oct 10 '17 at 16:01

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" />

Button text has disappeared

3 Answers3