Question

我正在使用带有此代码的Bootstrap 4

url.URL

当我在按钮上应用渐变时，我得到了一种奇怪的闪烁效果。这是我使用的与按钮相关的CSS

<!-- 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>

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

我认为它连接到.btn类但是我无法在bootstrap 4s代码中找到任何会产生这种效果的代码。

Answer 1

它来自这个CSS内部引导程序，会让你丢失: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>

当我使用渐变时，bootstrap btn背景闪烁

1 个答案: