How to hide button outline

Question

I have this page with a lot of buttons here: https://jsfiddle.net/Android272/c150305z/

I have tried every combination of the below code but nothing will get rid of the outline.

*:focus,
button,
button:focus,
button:active {
  outline: 0;
  outline-width: 0;
  outline: none;
  outline-style: none;
}

Answer 1

Theoretically, one could write:

button {
    outline: none; 
}

This will remove the select border from a button. However, in this case we require !important on the outline property to prevent Bootstrap from overwriting it (seen below). I would also recommend adding cross-browser support for a known bug with Chrome and Firefox.

button {
    outline: none !important; 
}

input[type="button"]::-moz-focus-inner {
    border: 0;
}

Alternatively, Bootstrap has these styles associated with buttons on focus that you need to either remove or overwrite.

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

Use this to overwrite it:

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none;
}    

Answer 2

Updated your fiddle here: Working Fiddle

just this line: button { outline: none !important; }

Answer 3

Your HTML is using twitter bootstrap's btn andbtn-primary clasess

<button type="button" class="btn btn-primary circle"...></button>

This is what those classes do:

 .btn{
     border: 1px solid transparent;
 }

.btn-primary {
      color: #fff;
      background-color: #337ab7;
      border-color: #2e6da4;
 }

So use border: none; and that annoying blue border shall disappear!

https://jsfiddle.net/c150305z/16/