如何避免对引导按钮使用！important

Question

我想使用引导程序为我的页面创建一个简单的按钮，但在：focus和：active上没有那个令人讨厌的阴影框

我尝试过！重要的是它有效，但是我不想用它来创建自定义的CSS按钮

我尝试覆盖课程中的按钮，以便可以使用 .class .btn-primary：active 作为示例，但仍然无法正常工作

/* Buttons
---------- */
.btn {
    font-size: 0.75rem;
    padding: 0.75rem 1.75rem;
    border-radius: 1.5rem;
    text-transform: uppercase;
    transition: border-radius 0.25s ease-in-out;
}

.btn:hover {
    border-radius: 0.375rem;
}

.btn-primary {
    background-color: #5D88EA;
    border-color: transparent;
    box-shadow: 0.375rem 0.375rem 1.25rem #5D88EA;
}

.btn-primary:hover {
    background-color: #5D88EA;
    border-color: transparent;
}

.btn-primary:active {
    background-color: #5D88EA !important;
    border-color: transparent !important;
}

.btn-primary:active, .btn-primary:focus {
    box-shadow: 0.375rem 0.375rem 1.25rem #5D88EA !important;
}

.btn-outline-primary {
    color: #5D88EA;
    border-color: #5D88EA;
}

.btn-outline-primary:hover {
    color: #5D88EA;
    background-color: inherit;
    border-color: inherit;
}

.btn-outline-primary:active {
    color: #5D88EA !important;
    background-color: inherit !important;
    border-color: inherit !important;
}

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

在按钮之前，我在CSS皮棉上有0个错误和0个警告。 这就是我所做的，我可以简化一下吗？谢谢！