title: How to remove Firefox's dotted outline on BUTTONS as well as links?
body: <p>I can make Firefox not display the ugly dotted focus outlines on <b>links</b> with this:</p>
  
  <pre class="lang-css prettyprint-override"><code>a:focus { 
      outline: none; 
  }
  </code></pre>
  
  <p>But how can I do this for <code>&lt;button&gt;</code> tags as well? When I do this:</p>
  
  <pre class="lang-css prettyprint-override"><code>button:focus { 
      outline: none; 
  }
  </code></pre>
  
  <p>the buttons still have the dotted focus outline when I click on them.</p>
  
  <p>(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)</p>