'remove overlay from vuetify button

I have a v-btn that I am using inside a component. The problem is that I need to remove the overlay from the button. In terms of the API the closest that I can find is the ripple, which is not what I am looking for. When I view the source I can see that I am getting the overlay from here:

.v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) .v-btn__content {
  opacity: 0.62;
}

I am implementing the view button such as:

<v-btn plain class='yellowButton' id='ResourceBtn' @click="SubmitForm()" >Submit</v-btn>

I have tried the following CSS, and have had no luck:

<style scoped>
.v-btn--plain:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) .v-btn__content{
  opacity: 1 !important;
}
.yellowButton{
    background-color: #FFD007;
    color: #0033A1 !important;
    font-size:16px;
    font-weight: 600;
    letter-spacing: -.25px;
    opacity: unset !important;

}
.yellowButton span.v-btn__content{
  opacity:inherit !important;
}
</style>

Any suggestions about what I am missing would be greatly appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source