I have implemented Bootstrap 4 with the following code snippet:
<!-- 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>
Upon applying a gradient to the buttons, I am experiencing a strange flickering effect. Below is the CSS code related to the buttons:
.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);
}
For a visual demonstration of the issue, please refer to the following gif: https://gyazo.com/3d584bae179e7d3bda7f5610d3145f8f
I suspect that the flickering effect is associated with the .btn class, but I have not been able to identify any relevant code in Bootstrap 4 that would cause this problem.