How to Style Input and Submit Buttons

Solution with CSS properties

In the example below, we have <input> elements with <kbd class="highlighted">type="button"</kbd> and <kbd class="highlighted">type="submit"</kbd>, which we style with CSS properties. To style them, we use the background-color and color properties, set the border and text-decoration properties to "none". Then, we add padding and margin, after which we specify the cursor as "pointer".

Example of styling the input and submit buttons:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=button],
      input[type=submit] {
        background-color: #62529c;
        border: none;
        color: #fff;
        padding: 15px 30px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p>Styled input buttons.</p>
    <input type="button" value="Button" />
    <input type="submit" value="Submit" />
  </body>
</html>

Try it Yourself »

Result

<div class="demo not-prose"> Styled input buttons. <input type="button" value="Button"> </input> <input type="submit" value="Submit"> </input> </div>

In the next example, we have a <form> element within which we add <div> elements each containing a <label> and <input>. Then, we add another <input> with <kbd class="highlighted">type="submit"</kbd> and style it.

Example of styling a submit button in a form:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
      input[type=text] {
        padding: 5px;
        border: 2px solid #cccccc;
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }
      input[type=text]:focus {
        border-color: #33333;
      }
      input[type=submit] {
        padding: 5px 15px;
        background: #99e0b2;
        border: 0 none;
        cursor: pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Form example</h2>
    <form action="/form/submit" method="POST">
      <div>
        <label for="surname">Surname</label>
        <input type="text" name="surname" id="surname" placeholder="surname" />
      </div>
      <div>
        <label for="lastname">Last name</label>
        <input type="text" name="lastname" id="lastname" placeholder="lastname" />
      </div>
      <div>
        <label for="email">Email</label>
        <input type="email" name="email" id="email" placeholder="email" />
      </div>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Try it Yourself »