twitter-bootstrap - Change target background color of transition of buttons in bootstrap 4

Question

I want to change how a button behaves when the mouse hovers over it. By default the background of the buttons gets darker when hovering over it. I wanted to change this behavior by modifying the variables in the _variables.scss file in the bootstrap source. But the only variable I could find concerning this matter was:

$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

but I could not figure out what variables this transition is referring to? Can I somehow change the target background-color of this transition?

标签： twitter-bootstrapsassbootstrap-4hovercss-transitions

Answer 1

varbtn-transition没有定义. background-color它定义了CSS 过渡属性。这些是在过渡期间获得动画的属性。

您正在寻找button-variant@mixin。查看mixin的参数：

button-variant(
  $background,
  $border,
  $hover-background: darken($background, 7.5%), 
  $hover-border: darken($border, 10%), 
  $active-background: darken($background, 10%), 
  $active-border: darken($border, 12.5%)
) { .. }

如您所见$background，并且$border是必需的参数。所有其他参数都是可选的。因此，您可以通过更改这些可选参数来重新定义按钮颜色。例如，在这里我将$hover-background30% 的颜色调暗（覆盖默认的 7.5% 的颜色）...

@each $color, $value in $theme-colors{
  .btn-#{$color} {
    @include button-variant($value, $value, darken($value,30%), darken($value,10%), darken($value,10%), darken($value,12.5%));
  }
}

演示：https ://www.codeply.com/go/ybbHC4JUZN

您可以根据需要更改参数。