CODEWITHSUNDEEP
htmlcss
EKrol
EKrol

Reputation: 180

Why does my button have this default look

After adding CSS to my button, it still has a "default look". I think the image will explain more. I took out most of the code for other parts of the form to block out any unnecessary code how it looks like

.registration-table {
  background: #192231;
}

.signup-button {
  background: #494e6b;
  color: #ffffff;
  border: none;
  text-align: center;
  display: block;
  padding: 8px 18px;
  float: none;
  margin-bottom: 12px;
  width: 100%;
}
<table class="registration-table">
  <th>Signup Form</th>
  <form method="POST">
    <tr>
      <td>
        <button class="signup-button">
    <input type="submit" value="Signup"></button>
      </td>
    </tr>
  </form>
</table>

Upvotes: 1

Views: 270

Answers (3)

James Gedny
James Gedny

Reputation: 122

If you are wanting all submit buttons to look the same, put it in the CSS; input[type=submit] {}, E.g. 

input[type=submit] {
    background: #494e6b;
    color:#ffffff;
    border: none;
    text-align: center;
    display: block;
    padding: 8px 18px;
    float: none;
    margin-bottom: 12px;
    width: 100%;
}

And in your html you could then remove the element.

<table class="registration-table">
  <th>Signup Form</th>
  <form method="POST">
    <tr>
     <td>
    <input type="submit" value="Signup">
      </td>
    </tr>
  </form>
</table>

Upvotes: 0

rafon
rafon

Reputation: 1542

It seems there's an issue in your implementation.

You can actually do the following:

  • remove the input type button inside and then add type submit
  • or remove the button and add it's css class to the <input type="button">

.signup-button {
    background: #494e6b;
    color:#ffffff;
    border: none;
    text-align: center;
    display: block;
    padding: 8px 18px;
    float: none;
    margin-bottom: 12px;
    width: 100%;
  }
  <button class="signup-button" type="submit">Signup</button>
  <input type="submit" value="Signup" class="signup-button">

Upvotes: 0

RwwL
RwwL

Reputation: 3308

It's because you have an <input type="submit" value="Signup"> inside the button.

What you probably want is

<button class="signup-button" type="submit">Signup</button>

Upvotes: 2

Related Questions