I am having trouble removing the background hover effect, well, manually changing the hover effects of the Vuetify v-btn component.

I have atempted solutions from this one github thread I found https://github.com/vuetifyjs/vuetify/issues/3026, and some others as seen below, however, while I can edit the hover effects, this sort of button background opacity remains, i.e if I change it to white which I want, there is some opacity applied to it

<template>
    <v-card class="mx-auto" color="grey-lighten-3" max-width="448">
      <v-layout>
        <v-app-bar
          color="white"
          class="h-20 flex justify-center"
        >
        <v-btn
            class="no-hover font-googlePoppins font-bold leading-loose text-zinc-800"
            variant="text"
            :ripple="false"
        >Home</v-btn>
      </v-layout>
    </v-card>
  </template>
  

<script setup>
import {
  VAppBar,
  VBtn,
  VCard,
  VLayout,
} from 'vuetify/lib/components/index.mjs';

</script>

<style scoped>
.no-hover {
  transition: none !important;
}
.no-hover::before {
  background-color: rgb(255, 255, 255) !important;
  opacity: 1 !important;
}

.no-hover:hover {
  background-color: rgb(255, 255, 255) !important;
  opacity: 1 !important;
}
</style>