Vuetifyのv-btnのホバー時の背景色を変える

2020.07.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

[Vuetifyで丸いアイコンのボタンを作る際に、よりホバー時の背景色を目立たせたいと思ったのですが(アイコン・背景色の仕様については補足参照)、方法が公式ドキュメントから見つからなかったため、独自にカスタマイズする方法を調べてみました。

ブラウザのWebコンソール等で挙動を追ってみたところ、ホバー時の背景色はボタンのbefore疑似要素のスタイルを変更する事で変えられることが分かりましたので、実際にCSSを定義して試してみました。

想定通り動きましたので、記事化して共有したいと思います。

※ Vuetifyで丸いアイコンのボタンを作る方法、ホバー時の背景色の仕様については補足のセクションを参照

やってみたこと

  • コード
<v-btn icon class="thumb-up" color="#dddddd">
  <v-icon>mdi-thumb-up</v-icon>
</v-btn>
.thumb-up::before{
  background-color: #555555;
}
  • 表示
before after

補足

Vuetifyを利用して、次のように v-btnv-icon をセットすると丸いアイコンのボタンを作成することができます。

  • コード
<v-btn icon class="thumb-up" color="#dddddd">
   <v-icon>mdi-thumb-up</v-icon>
</v-btn>

ボタンをホバーした時の背景色は、ボタンのcolorの値によって変化します。

  • 表示:#555555の場合

  • 表示:#ff0000の場合

おわりに

どうしても変更したかったので、少し無理やりですが直接スタイルを適用する形で解決してしまいました。誰かの参考になれば幸いです。