Example of styling a submit button in a form:

Source Code: (back to article)

Result: Report an issue

<!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>

<div>

<label for="surname">Surname</label>

</div>

<div>

<!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>