Удалите синюю рамку из пользовательской кнопки CSS в Chrome

Я работаю над веб-страницей, и я хочу, чтобы пользовательский стиль<button> теги. Итак, с помощью CSS я сказал:border: none, Теперь он отлично работает в Safari, но в Chrome, когда я нажимаю на одну из кнопок, вокруг него появляется синяя рамка. я думалbutton:active { outline: none } или жеbutton:focus { outline:none } будет работать, но ни один не делает. Есть идеи?

Вот как это выглядит до нажатия (и как я хочу, чтобы оно все еще выглядело после нажатия):

И это граница, о которой я говорю:

Вот мой 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;
}

Ответы на вопрос(19)

Ваш ответ на вопрос