twitter-bootstrap - 当我使用渐变时，bootstrap btn 背景在点击时闪烁

Question

我在这段代码中使用 Bootstrap 4

<!-- Flickers on click -->
<a href="javascript:void(0)" class="btn btn-primary">.btn .btn-primary</a>

<!-- Does not flicker on click -->
<a href="javascript:void(0)" class="btn-primary">.btn-primary</a>

<!-- Does not flicker on click -->
<a href="javascript:void(0)" class="button">.button</a>

当我对按钮应用渐变时，出现奇怪的闪烁效果。这是我使用的与按钮相关的 CSS

.btn {
    transition: all .3s ease;
    border-radius: 3px;
    padding: 5px 15px;
}
.btn-lg {
    padding: 15px 25px;
}
.btn-primary {
    background: #556270;
    background: -webkit-linear-gradient(to right, #FF6B6B, #556270);
    background: linear-gradient(to right, #FF6B6B, #556270);
    color: white;
    border: 0px;
    padding: 5px 15px;
    border-radius: 3px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:hover:active {
    background: #11998e;
    background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
    background: linear-gradient(to right, #38ef7d, #11998e);
    color: white;
    outline: none !important;
}
.button {
    display: inline-block;
    padding: 5px 15px;
    background: #556270;
    background: -webkit-linear-gradient(to right, #FF6B6B, #556270);
    background: linear-gradient(to right, #FF6B6B, #556270);
    color: white;
    transition: all .3s ease;
    border-radius: 3px;
}
.button:hover, .button:focus, .button:hover:active {
    background: #11998e;
    background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
    background: linear-gradient(to right, #38ef7d, #11998e);
}

这是一个简短的 gif 来显示正在发生的事情 https://gyazo.com/3d584bae179e7d3bda7f5610d3145f8f

我认为它与 .btn 类有关，但是我在 bootstrap 4s 代码中找不到任何可以产生这种效果的东西。

Answer 1

它来自这个 CSS inside bootstrap，它让你在 :active 状态下丢失背景图像

.btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active {
    background-image: none;
}

因此您还可以将 :active 添加到您的规则中:

.btn {
  transition: all .3s ease;
  border-radius: 3px;
  padding: 5px 15px;
}

.btn-lg {
  padding: 15px 25px;
}

.btn-primary {
  background: #556270;
  background: -webkit-linear-gradient(to right, #FF6B6B, #556270);
  background: linear-gradient(to right, #FF6B6B, #556270);
  color: white;
  border: 0px;
  padding: 5px 15px;
  border-radius: 3px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:hover:active,
.btn-primary:active{
  background: #11998e;
  background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
  background: linear-gradient(to right, #38ef7d, #11998e);
  color: white;
  outline: none !important;
}

.button {
  display: inline-block;
  padding: 5px 15px;
  background: #556270;
  background: -webkit-linear-gradient(to right, #FF6B6B, #556270);
  background: linear-gradient(to right, #FF6B6B, #556270);
  color: white;
  transition: all .3s ease;
  border-radius: 3px;
}

.button:hover,
.button:focus,
.button:hover:active,
.button:active{
  background: #11998e;
  background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
  background: linear-gradient(to right, #38ef7d, #11998e);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Flickers on click -->
<a href="javascript:void(0)" class="btn btn-primary">.btn .btn-primary</a>

<!-- Does not flicker on click -->
<a href="javascript:void(0)" class="btn-primary">.btn-primary</a>

<!-- Does not flicker on click -->
<a href="javascript:void(0)" class="button">.button</a>