'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 |
|---|
