Some buttons have :focus style applied on click
<p>Why do some buttons get :focus style applied when clicking them and some don't? For example, <a href="https://angular-ui.github.io/bootstrap/#/modal" rel="nofollow">angular-ui modal</a> close buttons have it applied, but try <a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_test" rel="nofollow">W3Schools button element</a> and it doesn't.</p>

<p>EDIT: I am reopening this question. Forgive me, I had forgotten a bit about this, because I really tought that it was solved until yesterday I really tried it out. So I did something like this: <code>.btn:focus:not(:active) { outline: none;}</code>, but the problem is that then it also doesn't show focus when using <code>tab</code> button. And forget about bootstrap at all, it's not it!</p>

<p>It seems that the focus effect becomes visible on button click when it's <code>background-color</code> property for <code>:focus</code> is defferent from default. Maybe true for some other properties as well.</p>

<p>So - if the <code>background</code> is default, then you can see focus effect only when using <code>tab</code> key or setting it to <code>:focus</code> manually. If the <code>background</code> is different, you can see the effect also on click. Plunker demonstrating this: <a href="https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p=preview" rel="nofollow">https://plnkr.co/edit/2eKrtwl2wZcj3Ty4JJSu?p=preview</a></p>

<p>Maybe I have answered my question myself, maybe not, don't know.</p>

<p>edit2: Just saw @musically_ut edit giving almost the same example.</p>

<p><strong>UPDATE</strong></p>

<p>After discussion with @Error404, I can clarify the question more precisely.
So the question is - why default <code>button</code>'s <code>outline</code>  style is not showing when it has been <strong>clicked</strong>?</p>

<p>See "clicked" in bold, because it is not working only on click. It works when focusing on it using keyboards <code>tab</code> key, it works when setting it manually with developer tools.</p>

<p>Mostly all answers so far argue that it loses or doesn't have focus at all when clicked, but it does. You can change <code>button</code>'s <code>background</code> or <code>border</code> and probably some other property too and suddenly, when you click it, you see the outline. Or you can change the <code>outline</code> itself to something else in <code>:focus</code> rule and it will show also. </p>