Eliminar borde azul del botón de estilo personalizado css en Chrome

Estoy trabajando en una página web y quiero un estilo personalizado.<button> etiquetas Así que con CSS, dije:border: none. Ahora funciona perfectamente en safari, pero en cromo, cuando hago clic en uno de los botones, coloca un borde azul molesto a su alrededor. pensébutton:active { outline: none } obutton:focus { outline:none } Funcionaría, pero tampoco lo hacen. ¿Algunas ideas?

Así es como se ve antes de hacer clic (y cómo quiero que se vea después de hacer clic):

Y esta es la frontera de la que estoy hablando:

Aquí está mi CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Respuestas a la pregunta(19)

Su respuesta a la pregunta