Vuetifyのボタンのイベントを変更したい

Question

前提・実現したいこと

（前提）
Vue, Vuetifyを用いて簡易的なSPAを作成しております。
アプリケーション内で用いるボタンをVuetifyによって追加されるディレクティブのv-btnで作りました。このv-btnで作成したボタンはデフォルトでホバー時、クリック時、セレクト時に背景に薄く色がついたり、ブラーがかかったりします。

（実現したいこと）
このボタンのホバー時、クリック時に発生するスタイルの変化を無くしたい。

発生している問題・エラーメッセージ

styleを直接指定しても、デフォルトのホバー時、クリック時、セレクト時のイベント（背景色）を変更できない。

該当のソースコード

<template>

  ~~その他コンテンツ~~

  <div class="hidden-xs-only mr-5 mt-3" v-for="button in buttons" :key="button.text">
      <v-btn
      router
      :to="button.route"
      retain-focus-on-click
      
      color="grey darken-3"
      text
      tile
      class="change-color"
      >
          <span class="ml-1 subtitle-2 font-weight-bold" dark>{{ button.text }}</span>
      </v-btn>
  </div>

　~~その他コンテンツ~~

</template>

<style scoped>
.change-color {
    border-bottom: solid 2px white;
    background: white !important;
    transition-duration: .5s;
    transition-property: all
}
.change-color:hover {
    transform:scale(1.05, 1.05);
    border-bottom: solid 2px #616161;
}
</style>

試したこと

① styleにおいて直接、背景色を指定する。
② scriptのmethodsに背景色を白に変更する関数を作り、@clickで繋げる。

補足情報（FW/ツールのバージョンなど）

vue/cli 4.0.5
vuetify 2.2

Answer 1

デフォルトでホバー時、クリック時、セレクト時に背景に薄く色がついたり、ブラーがかかったりします。

おそらく、ripple effectのことかと思いますが、v-btnのrippleプロパティで無効にすることができます。

ドキュメント: https://vuetifyjs.com/en/api/v-btn/#props
例: https://codepen.io/daikiojm/pen/mdEGLMX

ホバー時の背景色に関しては、sass変数で制御することが可能です。

$btn-hover-opacity

デフォルトが、 0.8 のようなので、0 にすれば表示されなくなるかと思います。

ドキュメント: https://vuetifyjs.com/en/api/v-btn/#sass-variables