如何从Bootstrap按钮中移除过渡效果？

Question

我有一个Bootstrap按钮，在其中我覆盖了样式表中的样式，因为我想更改边框半径。现在该按钮具有从Bootstrap过渡的效果，如何摆脱它？结果请参见以下代码段：

.btn {
    border-radius: 0;
    width: 12.313rem;
    padding: 1rem 0.8rem;
    transition: none;
    &-outline-dark {
        color: #000000;
        border-color: #000000;
        transition: none;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<button type="button" class="btn btn-outline-dark">NOW</button>

Answer 1

[如果要在将鼠标悬停在按钮上时消除颜色变化，那么您需要做的就是利用hover伪类，您可以在w3c网站https://www.w3schools.com/css/css_pseudo_classes.asp中找到有关此信息的更多信息。

在此代码段中，您可以找到要实现的目标的可能解决方案：https://jsfiddle.net/mja1n8ud/

Answer 2

只需在否决中添加！important，我还添加了悬停部分，但我不清楚您是否需要此特定内容。

.btn {
    border-radius: 0;
    width: 12.313rem;
    padding: 1rem 0.8rem;
    color:#000!important;
    transition: none!important;
    &-outline-dark {
        color: #000000;
        border-color: #000000;
        transition: none!important;

    }
}
.btn:hover {
    background-color:#fff!important;
    color:#000!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<button type="button" class="btn btn-outline-dark">NOW</button>