我在这段代码中使用 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 代码中找不到任何可以产生这种效果的东西。
最佳答案
它来自这个 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>
关于twitter-bootstrap - 当我使用渐变时,bootstrap btn 背景在点击时闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48833312/