I am developing a website using Vue.js 2.6.10n with Vuetify 2.1.0 and vue-router 3.1.3. 

I have a v-app-bar with v-btns to link to my different pseudo pages and want to have a custom class when the button is active, i.e that it links to the page being currently displayed. Using the `active-class`of the v-btn, I am able to add style "on top" of the Vuetify default, but not to overwrite it completely. 

How can I totally get rid of the default active-class? 

My objective is only to have the btn text underlined when it is active, and to get rid of that "button pressed" style which is the default.

Here is a sample of my code:

```
<template>
<v-btn
        to="/"
        active-class="active"
        text
        class=" white--text display-1 logo"
        >HOME</v-btn>
.
.
.
</template>
<style lang="scss" scoped>
.active {
  border-bottom: solid;
  border-color: yellow;
}
</style>

```