El pseudo-elemento que buscás se llama:
.btn-calc::-moz-focus-inner {
border: none;
}
Cabe aclarar que eliminar el outline es una mala práctica en cuanto a experiencia de usuario y accesibilidad, ya que dificulta el uso de las páginas a usuarios que navegan con el teclado en las formas. El outline sirve para saber cuál es el elemento que está activo. Te sugiero que si vas a eliminar el outline, al menos coloqués otra forma de identificar que el botón está activo. Por ejemplo, podrías cambiar el estado del botón para que al recibir el foco (:focus
) tenga una sombra alrededor, que es una forma más sutil de integrarlo a la interfaz.
Te copio ambos ejemplos:
.btn-calc {
margin: 4px;
width: 45px;
height: 45px;
border: none;
text-decoration: none;
cursor: pointer;
border-radius: 5px;
text-transform: capitalize;
font-size: .9em;
background: transparent;
color: #939393;
outline: none !important;
}
.btn-calc.sombra:focus {
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.btn-calc::-moz-focus-inner {
border: none;
}
<h3>Ejemplo sin outline:</h3>
<button class="btn-calc math" id="AC">c</button>
<h3>Ejemplo con sombra al recibir el foco:</h3>
<button class="btn-calc math sombra" id="AC">c</button>