问题样式引导按钮答案

【问题标题】：Issue styling Bootstrap buttons问题样式引导按钮
【发布时间】：2017-02-19 07:04:31
【问题描述】：

我在使用 Bootstrap 中的样式按钮时遇到问题，希望您能帮助我。

我已经在 JS fiddle 中尝试过这个，我已经按照我想要的方式工作了 here。因此，当我将鼠标悬停在按钮上时，我得到深蓝色，当我单击它时，我得到相同的深蓝色。

但是，当我在 Firefox 或 Chrome 上查看页面并单击按钮时，会出现“btn-default”类的默认颜色（灰色）。我是一个完全的初学者，从我短暂学习 CSS 和 Bootstrap 开始，活动的伪类是在单击按钮时使用的。我试过用这个覆盖它：

.btn-default.active, .btn-default:active{
    background-color: #1e3c89;
    border-color: #1e3c89;
}

知道我做错了什么吗？

编辑：感谢您的回复。我不确定我是否在解释我想要正确实现的目标。所以我发布了一个链接here，它正确地说明了我的问题（为质量道歉）。按钮的当前状态是浅蓝色，当我悬停时它是深蓝色。您会注意到该按钮然后变为灰色，即当我单击该按钮时。当我单击按钮时，我希望它是相同的深蓝色。

【问题讨论】：

那么你到底想要什么？
:active 是当它当前被点击时，意味着它与鼠标点击一起释放。（当你放开鼠标时）我们需要更多的代码来找到确切的问题。
你想做什么？更改“活动”状态的颜色？如果是这样，您已经做对了，但需要将颜色更改为与悬停和焦点状态不同的颜色。
@HusainAhmmed 我用一段视频更新了我的帖子，展示了我的问题是什么以及我想做什么。
好的，我看到了你的更新。但是如果没有您的代码，我们很难找出您面临的问题。因此，请将您的代码粘贴到您的问题中，以便我们尝试找出问题所在？

标签： html css twitter-bootstrap

【解决方案1】：

悬停和活动状态的颜色相同。

尝试更改活动状态的颜色

.btn-default.active, .btn-default:active {
   background-color: #5e4c89;
   border-color: #5e4c89;
   color: #fff;
   box-shadow: inset 0 3px 5px rgba(0,0,0,0.5);
}

https://jsfiddle.net/rooo55nw/

【讨论】：

请看我更新的帖子。它包括一个 gif 和一个关于我想要做什么的解释。