How to remove the dotted white border around focused button text

These styles are declared at the UA level, so each browser has their own implementation (and in Firefox case, pseudo elements for targeting them).

In Firefox, you can use the ::-moz-focus-inner pseudo element:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
}  

You need to add setback for different browsers, for example:

button:focus,
button:active {
    -moz-outline: 0;
    -ms-outline:0;
    -o-outline: 0;
    -webkit-outline: 0;
} 

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.