Change form button style

Change form button style : Button : Form Style HTML CSS TUTORIALS


 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
.button {
  padding: 4px;
  font-size: 1.5em;
}

.buttonReset {
  color: #fcc;
  background-color: #900;
  border: 1px solid #660;
}

.buttonResetRoll {
  color: white;
  background-color: #c00;
  border: 1px solid #660;
}

.buttonSubmit {
  color: white;
  background-color: #660;
  border: 1px solid #660;
}

.buttonSubmitRoll {
  color: white;
  background-color: #cc0;
  border: 1px solid #660;

}


  </style>
  <script language="JavaScript" type="text/javascript">

function classChange(styleChange,item) {
    item.className = styleChange;
}

  </script>
</head>
<body>

<form action="" method="post">

  <label for="question">Question?</label>
  <input type="text"
         name="question"
         id="textfield"
         value="Type answer here" /><br />

  <input name="reset"
         type="reset"
         id="reset"
         value="Reset"
         class="button buttonReset"
         onMouseOver="classChange('buttonResetRoll',this)"
         onMouseOut="classChange('buttonReset',this)" />

  <input type="submit"
         name="Submit"
         value="Submit"
         class="button buttonSubmit"
         onMouseOver="classChange('buttonSubmitRoll',this)"
         onMouseOut="classChange('buttonSubmit',this)" />


</form>

</body>
</html>

HTML code for linking to this page:

Change form button style : Button : Form Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Form Style » Button »

Change form button style

HTML CSS TUTORIALS