Why default button overrides outline on focus event?
<p>I do not know if it is a bug or not, but it seems to be.</p>

<p>When you have a default <code>button</code> and you click it when you have a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus" rel="noreferrer"><code>:focus</code></a> pseudo class it does not seem to have an <code>outline</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#buttontag:focus {
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buttontag" type="button"&gt;Focus me&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>It shows the <code>outline</code> when you use <kbd>tab</kbd> key, though.</p>

<p>Nevertheless, it shows the <code>outline</code> both when clicking or using <kbd>tab</kbd> key on the <code>button</code> if you change the <code>background-color</code> to it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#buttontag:focus {
  background-color: #dde;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buttontag" type="button"&gt;Focus me&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>But it does not work for all types of <code>background-color</code>. For example, it does not work for <code>background-color: #ddd</code>. In this case it is only shows when you use <kbd>tab</kbd> key.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#buttontag:focus {
  background-color: #ddd;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buttontag" type="button"&gt;Focus me&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>Here an screenshot when the <code>button</code> is focused, nothing changes.</p>

<p><a href="https://i.stack.imgur.com/J10zu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/J10zu.png" alt="enter image description here"></a></p>

<p>I know that the <code>background-color: #ddd</code> is the same colour as the default border of the <code>button</code> (both on focus or not focused). I have created the following code to be sure of it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var buttontag = document.getElementById('buttontag');
buttontag.onfocus = function(){
  var border = window.getComputedStyle(buttontag).getPropertyValue("border");
  alert(border);
}

var border = window.getComputedStyle(buttontag).getPropertyValue("border");
alert(border);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#buttontag:focus {
  background-color: #ddd;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buttontag" type="button"&gt;Focus me&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>I know that <code>rgb(221, 221, 221)</code> is the same as <code>#DDDDDD</code> on hex and that is the same as <code>#ddd</code>. I do not know if it has to be something related about contrast between both colours (there is no contrast because they are the same colour) and <code>outline</code> but it is very strange that in this <code>background-color</code> the <code>outline</code> does not appear.</p>

<p><strong>More and more strange</strong></p>

<p>If you inspect the default <code>button</code> and you force it to be focussed (I am trying on <code>Google Chrome</code> debugger) , it has an <code>outline</code> and shows it on the button. It is the default <code>outline</code> that appears in the rest of <code>buttons</code> with another <code>background-color</code>.</p>

<pre><code>:focus {
    outline: -webkit-focus-ring-color auto 5px;
}
</code></pre>

<p>And I also wanted to know if it was something related about forcing the <code>button</code> to be in focus state so I created a <code>Javascript</code> snippet to see what <code>outline</code> the button has in <code>focus</code> state.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var buttonFocus = document.getElementById('buttontag');

buttonFocus.onfocus = function(){
  var outline = window.getComputedStyle(buttonFocus).getPropertyValue("outline");
  alert(outline);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#buttontag:focus {
  background-color: #ddd;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buttontag" type="button"&gt;Focus me&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>It retrieves the default <code>outline</code>, but does not show it. It seems that it only shows the <code>outline</code> if you force the <code>button</code> to be focussed (on the debugger).</p>

<p>I have searched on the official documentation but could not find anything related about a <em>special behaviour</em> for default <code>buttons</code> or specific <code>background-color</code>.</p>

<p>So here I have some questions:</p>

<ul>
<li>Why is the <code>outline</code> not displayed on the default <code>button</code> when you click on it?</li>
<li>Why with <code>background: #ddd</code> it is not shown also?</li>
<li>Why is the <code>outline</code> shown when you use <kbd>tab</kbd> and not when you click on the <code>button</code> (on the two cases above)? </li>
<li>Why the <code>button</code> has the <code>outline</code> in his <code>CSS</code> but it does not display it? Is it a bug?</li>
</ul>