【Bootstrap】チェックボタンのホバーが分かりづらい

Bootstrapのチェックボタンのホバー仕様

スマホなどで見ると顕著で、ボタンをオンオフ切り替えしたときにボタンを押した後どこか触るまでホバーがかかっており、ONになったのかOFFになったのかわかりづらい。

応急処置　ホバーを消す

scss/mixins/_buttons.scssの

 &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    }

を

  &:hover {
    color: $color;
    border-color: $border;
    box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

みたいな感じにする。
色変更のホバーエフェクトを無くす代わりに、フォーカス時と同じようなbox-shadowをかけてホバー状態であることは分かるようにした。

アウトラインボタンも同様で、

&:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

の部分を

  &:hover {
    color: $color;
    background-color: transparent;
    border-color: $color;
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

こんな感じにすると、ホバー時のエフェクトがbox-shadowだけになる。

SCSSを使っていない場合

上記のようにSCSSファイルを変更すると、CSSは以下のようになるので、自力で変更もできる。

.btn-secondary:hover {
  color: #fff;
  border-color: #6c757d; //ボタンの背景色そのまま
  -webkit-box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
          box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}

おわりに

あくまで応急処置なので、上記の対応ではチェックボタンではないすべてのボタンのホバーまで変更されることに注意。
一部のみに適用したい場合は、新規にクラスを作成するなどの手間が必要？

---

追記

labelのアウトラインボタンに対してのみホバー効果を変更する

@at-root :not(label)#{&}:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  @at-root label#{&}:hover {
    color: $color;
    background-color: transparent;
    border-color: $color;
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

labelのボタンに対してのみホバー効果を変更する

  @at-root :not(label)#{&}:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  @at-root label#{&}:hover {
    color: $color;
    border-color: $border;
  }

加えて、focusの部分から以下の記述を削除するのもアリ

 @include gradient-bg($hover-background);