title: Why pseudo element :focus on button when using TAB but not click?
body: <p>I was looking into the default functionality of form elements and what different states they have between browsers. I found something quite strange. This has been tested in different browsers and the results are similar. The screenshots below are from Chrome v44.0.2403.155m (64-bit Windows).</p>
  
  <p>Ok, so the problem is with focus states of buttons. Below you will see a default form with no css styling. I click on the first input and then use the Tab Key to tab down the form elements. In chrome you get a light blue outline applied to every element you tab onto. </p>
  
  <p><a href="https://i.stack.imgur.com/Eue6V.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/Eue6V.gif" alt="enter image description here"></a></p>
  
  <p>Notice that when I click on the button with the mouse there is no light blue "focus" state it only happens when I tab onto it.  </p>
  
  <p>I presumed this was just using :focus, and if I styled button:focus then I would be able to replicate this default behavior. Tab onto a button it highlights, click on a button it does not. Have a look at this styled version of the form...</p>
  
  <p><a href="https://i.stack.imgur.com/MeKwz.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/MeKwz.gif" alt="enter image description here"></a></p>
  
  <p><strong>When I click on the first input and tab down it does the same thing, my custom outline is shown (this is fine). However, notice when I click on the button, it is applying the :focus state to it.</strong> This is not the same as the default behavior. In the un-styled version, a click does not apply a focus state.</p>
  
  <p>The only CSS I am using on the button is...</p>
  
  <pre><code>input:focus, button:focus {
      outline: 2px solid green;
  }
  </code></pre>
  
  <p>Here is a demo: <a href="http://jsfiddle.net/oy83s4up" rel="noreferrer">http://jsfiddle.net/oy83s4up</a></p>
  
  <p><strong>How do I make sure there is no outline when the button is clicked, only when it is tabbed?</strong>. Also, by default when a button is focused with the tab key, even when it is clicked, the outline still remains, this is also functionality I want to replicate.</p>
  
  <p><strong>Note:</strong> I am not looking for a JS work around, The first animation is default behavior in the browser. Surely it can replicated with css only? If not, then it is a bug.</p>