Bootstrapで:active時の色を変えたい

Question

Bootstrapでボタンのactive時の色を変えたい

Bootstrap(ver.4.3.1)でLPを作成しているのですが、btn-primaryで青色になったボタンの色を:hover、:active時共に紫色に変更したいのですが、hoverだけが適用されて、activeの色が青色のまま変わりません。なぜでしょうか？

また、hoverとactiveを別々ではなく一箇所にまとめて記述する方法はありますか？

宜しくお願いします。

該当のソースコード

<div class="container-fluid padding">
  <div class="row padding">
    <div class="col-lg-6">
      <h2>If you build it...</h2>
      <br>
      <a href="#" class="btn btn-primary">Learn More</a>
    </div>
    <div class="col-lg-6">
      <img src="img/desk.png" class="img-fluid">
    </div>
  </div>
</div>

.btn-primary {
  background-color: #6648b1;
  border: 1px solid #6648b1;
}

.btn-primary:hover {
  background-color: #563d7c;
  border: 1px solid #563d7c;
}

.btn-primary:active {
  background-color: #563d7c;
  border: 1px solid #563d7c;
}

Answer 1

Bootstrap のスタイルと active 擬似クラスのスタイルが競合し、 Bootstrap のスタイルが適用されてしまっているためです。解決策としては、 !important 規則を使用するか、詳細度を Bootstrap のスタイル以上に大きいものにすることが考えられます。また、スタイルをまとめるためには、セレクターリストが使用出来ます (動作確認用リンク)。

.btn-primary {
  background-color: #6648b1;
  border: 1px solid #6648b1;
}

.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: #563d7c;
  border: 1px solid #563d7c;
}

もしくは (動作確認用リンク):

.btn-primary {
  background-color: #6648b1;
  border: 1px solid #6648b1;
}

.btn-primary:hover, .btn-primary:active {
  background-color: #563d7c !important;
  border: 1px solid #563d7c !important;
}

Comments

[lioheart9]

ご丁寧に回答いただきありがとうございます！
!importantでの上書きについては理解しました。
:not(:disabled):not(.disabled)についてなのですが、この部分自体にbootstrapのスタイルを無効化する意味合いがふくまれているのでしょうか？また、:disabledと.disabledの二つを記述するのはなぜですか？
お手数ですが、よろしくお願いします。

[s8_chu]

> :not(:disabled):not(.disabled)についてなのですが、この部分自体にbootstrapのスタイルを無効化する意味合いがふくまれているのでしょうか？
Bootstrap では `.btn-primary:not(:disabled):not(.disabled):active` というように `active` 擬似クラスへのセレクタが指定されています。これを上書きするためには、これ以上の詳細度のセレクタによってスタイルを指定しなければなりません。そこで、 Bootstrap で使用されているセレクタと同様のセレクタを使うことでスタイルを上書きすることが出来ます。

[lioheart9]

お返事ありがとうございます。遅くなってしまってすみません。
そうだったのですね。ご丁寧にありがとうございます。
他にも元々どいういうセレクタが指定されているか気になるので、調べてみます！