从Chrome中的CSS自定义样式按钮中删除蓝色边框

我正在制作网页，并且需要自定义样式的<button>标签。因此，对于CSS，我说：border: none。现在，它可以完美地用于野生动物园，但是在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;
}