删除按钮阴影

Question

我正在使用 Bootstrap 3 并尝试删除按钮的阴影/轮廓。我目前拥有的代码部分执行此操作。单击按钮时，轮廓仍会出现一瞬间。

这是我的 代码笔 的链接。

  .btn:active,
 .btn:focus,
 .btn.active {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
 }

原文由 Hudson Taylor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新 - Boostrap 4

在此版本中，您可以使用实用程序类 shadow-none 删除按钮阴影。

 .btn {
  height: 100px;
  width: 100px;
}

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <button class="btn shadow-none">No Shadow</button>
    </div>
    <div class="col-3">
      <button class="btn shadow-sm">Shadow Small</button>
    </div>
    <div class="col-3">
      <button class="btn shadow">Regular Shadow</button>
    </div>
    <div class="col-3">
      <button class="btn shadow-lg">Shadow Large</button>
    </div>
  </div>
</div>

在这里 查看更多信息

---

旧答案 - Bootstrap 3

你错过了这个：

 .btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
  outline: thin dotted;
  outline-offset: -2px;
}

所以你需要重新设置它。 （ !important 仅用于演示 - 不要在您的开发代码中使用）

片段

 .container-fluid {
  text-align: center;
}
body .btn {
  height: 170px;
  width: 170px;
  border-radius: 50% !important;
  outline: 0 !important;
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-offset: 0  !important;
  background-image: none  !important;
  -webkit-box-shadow: none !important;
  box-shadow: none  !important;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <p>result</p>
  <div class="row">
    <div class="col-sm-4">
      <button class="btn">Rock</button>
    </div>
    <div class="col-sm-4">
      <button class="btn">Paper</button>
    </div>
    <div class="col-sm-4">
      <button class="btn">Scissors</button>
    </div>
  </div>
</div>

原文由 dippas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Bootstrap 4.1 支持添加一个类 shadow-none 来去除阴影。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<p>Click both buttons below to see the difference:</p>
<button class="btn">Bootstrap button</button>
<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

原文由 Philip Bijker 发布，翻译遵循 CC BY-SA 4.0 许可协议