Twitter bootstrap .btn 类：按钮文本颜色在被点击后发生变化答案

【问题标题】：Twitter bootstrap .btn class: Button text color changes after being clicked onTwitter bootstrap .btn 类：按钮文本颜色在被点击后发生变化
【发布时间】：2016-08-23 00:32:44
【问题描述】：

我正在使用 twitter bootstrap .btn、.btn-success 等类来设置网页上的按钮样式。一切都很好。除非我单击按钮，否则按钮的文本颜色会发生变化，并且在我单击页面上的其他位置之前它不会变回原始颜色。我想做的是避免单击按钮时初始文本颜色发生变化。当我将鼠标悬停在它上面时改变颜色，对我来说就足够了。这是按钮的html代码：

<a ui-sref="login" style="outline:none; text-decoration:none; box-shadow:none" class="btn btn-primary btn-outline btn-success btn-tadaa-logout" ng-if="!session.authenticated">Log ind</a>

提前致谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

要在点击后保留颜色，您需要添加以下 css：

.btn:focus, .btn-success:focus{
      background:#449D44;
    }

查找 Bootply 演示 HERE

【讨论】：

【解决方案2】：

这是因为您的A:Visited 样式覆盖了默认按钮文本样式；

将您的 <a> 标签包裹在另一个元素中并设置其样式，例如<p class="btn-link"><a class="btn"> 并在你的 CSS 中包含 p.btn-link a:Visted { color:#fff }

【讨论】：

【解决方案3】：

添加以下内容不能解决问题吗？：

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

【讨论】：