why the outline:none work on the initial state of button in the following code?

When we click a button a blue outline appears .My question is that why when we use outline:none on the initial state of button it removes the outline.The outline:none should work only when we have used it in:focus pseudo class on the button as it appears only when the button is focused

The code :

Html:

Submit

css:

button{ outline:none } why this code works and the outline gets removed