title: The text inside my button is editable in HTML. Why?
body: <p>I have created a basic HTML page that has a Login and Cancel button, but whenever I click on the buttons, it allows me to edit the text on the button itself. I have checked the coding and it seems perfectly fine. Upon research I only get results pertaining to how to edit text in fields and such. How can I fix this problem?</p>
  
  <p>Here is the HTML coding I am using to create the button:</p>
  
  <pre><code>&lt;input class="button" onclick="check(this.form)" value="Login"&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;input class="button" name="cancel"  value="Cancel"&gt;
  </code></pre>
  
  <p>Here is the class I am using in the CSS for the button:</p>
  
  <pre><code>.button {
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      padding: 14px 62px;
      border: 0px solid #2b27a1;
      border-radius: 35px;
      background: #2525f5;
      background: -webkit-gradient(linear, left top, left bottom, from(#2525f5), to(#000326));
      background: -moz-linear-gradient(top, #2525f5, #000326);
      background: linear-gradient(to bottom, #2525f5, #000326);
      text-shadow: #591717 1px 1px 1px;
      font: normal normal bold 20px verdana;
      color: #ffffff;
      text-decoration: none;
  
  }
  .button:hover,
  .button:focus {
      border: 0px solid #453eff;
      background: #2c2cff;
      background: -webkit-gradient(linear, left top, left bottom, from(#2c2cff), to(#00042e));
      background: -moz-linear-gradient(top, #2c2cff, #00042e);
      background: linear-gradient(to bottom, #2c2cff, #00042e);
      color: #ffffff;
      text-decoration: none;
  }
  .button:active {
      background: #161693;
      background: -webkit-gradient(linear, left top, left bottom, from(#161693), to(#000326));
      background: -moz-linear-gradient(top, #161693, #000326);
      background: linear-gradient(to bottom, #161693, #000326);
  }
  </code></pre>