title: Prevent clicking button creating pressed effect
body: <p>I have a button on a form;</p>
  
  <pre><code>&lt;button type="button" class="button" onclick="validate_form_newsletter_wide( form )"&gt;&lt;img src="index_htm_files/btn_newsletter_wide.png" alt="Send"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>It styled using;</p>
  
  <pre><code>&lt;style&gt;
  
  button::-moz-focus-inner, 
  input[type="button"]::-moz-focus-inner, 
  input[type="submit"]::-moz-focus-inner, 
  input[type="reset"]::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
  }
  
  #form_newsletter_wide .button {
  position:relative;
  float: right;
  cursor:pointer;
  border: 0px;
  padding: 0px;
  margin: 0px;
  margin-top: -1px;
  z-index:100;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>When clicked in Firefox nothing about the button changes, in Chrome I get a highlight border around the button which I can live with but in IE it's more of a pressed effect where the button almost seems to move down and right. Is there anyway to prevent this?</p>