为什么bootstrap的按钮按下去不会回弹，就是感觉按钮陷下去了？

Question

在旁边随便点一下，按钮就恢复到饱满的转态了。我看很多用了bootstrap的网站在按钮按下去都会这样，但马上就恢复了，我的就一直陷下去了。

Answer 1

这是因为浏览器默认给button按下后有一个outline，这并不是bootstrap控件特意添加的。 如果要去掉这个效果可以把浏览器默认样式覆盖掉：

button, input {
    outline: none;
}

Answer 2

<button type="button" class="btn btn-primary">登录</button> 这样会出现所说的问题，换用< a >标签就不会，<a class="btn btn-primary" href="#" role="button">登陆</a>

Answer 3

这个状态和2各css伪类有关：

其一为:active

匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

其二为:focus

在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点

所以，鼠标完成一次点击后需要恢复原样的，使用:active伪类
鼠标完成一次点击后不恢复原样，直到失去叫焦点（如点击其他区域）才恢复，使用:focus伪类

Answer 4

这是 :active 和 focus 的区别：

:active:

点击某个元素（鼠标释放之前）之后，这个元素就是 active

:foucs：

点击某个元素，这个元素就是 focus

至于说陷下去的效果，可以使用 CSS3 的 box-shadow : inset xxx xxx xxx; 来设置。

Answer 5

box-shadow:none; 应该可以解决你的问题。

.btn:focus, .btn.focus, .btn:active:focus,.btn:active.focus, .btn.active:focus, .btn.active.focus, input:focus, input:active, select:focus, select:active:focus{outline:none; box-shadow:none;}

Answer 6

当你点击下按钮之后，按钮的状态是focus，这个时候会保持在按下的视觉效果。

我的处理方法比较笨，我把button的focus状态的背景色改为了未点击时候的状态，这样点击完按键看起来像是回弹了，视觉上更舒服一些。比如btn-default的#fff，具体如下。

<style type="text/css">
    .btn-default:focus
    {
        background-color: #fff;
    }
</style>