How to change blue outline color of a button when clicked [Bootstrap 4]

Question

If I click the following button a blue outline appears:

<button onclick="window.location.href='/Downloads'" type="button" class="btn btn-lg btn-primary" style="background-color:green;border-color:green">Download</button>

How can I change this color?

Answer 1

.btn {
  outline-color: red;
}

或仅在单击按钮时显式更改：

.btn:active {
  outline-color: red;
}

Answer 2

将此样式复制到CSS文件中，并应用与所需颜色对应的rgba。希望这会有所帮助。 ：）

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .5);
}

Answer 3

这完全删除了按钮的边框。 （已通过Bootstrap 4测试）

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

Answer 4

如果你需要改变颜色

.btn {
outline-color: red;
}

如果你只需要在点击按钮时改变颜色：

btn:active {
color:blue;
}

You can read more here