Change the text color of the Vuetify button to customize its appearance

Question

Is there a way to change the default active color for button text in a toolbar using CSS?

v-btn(:to="item.path" active-class="v-btn--active toolbar-btn-active") {{item.meta.title}}

I attempted to override it with this custom class:

.toolbar-btn-active {
  background-color: white;
  &::before {
    background-color: white;
  }
  .v-btn__content {
    color: red !important;
   }
}

However, only the background color is being changed. How can I update the button text color as well?

This is what the HTML looks like:

<a href="/document" class="v-btn v-btn--active toolbar-btn-active">
           <div class="v-btn__content">Document</div>
</a>

Answer 1

Answer №1

v-btn--active is the default active class, but it can be changed using the active-class property.

We are able to target the active-class and adjust the CSS as follows:

.v-btn--active .v-btn__content { 
  color: red 
}

It is important to note that in scoped styles, we must utilize deep selectors like so:

>>> .v-btn--active .v-btn__content

Answer 2

v-btn--active is the default active class, but it can be changed using the active-class property.

We are able to target the active-class and adjust the CSS as follows:

.v-btn--active .v-btn__content { 
  color: red 
}

It is important to note that in scoped styles, we must utilize deep selectors like so:

>>> .v-btn--active .v-btn__content

Answer 3

To modify a specific button in HTML, you can simply add a class to the v-btn element.

<v-btn class="custom-button">Button</v-btn>

<style>
.custom-button {
  color: green !important;
  background-color: orange !important;
}
</style>

Answer 4

To modify a specific button in HTML, you can simply add a class to the v-btn element.

<v-btn class="custom-button">Button</v-btn>

<style>
.custom-button {
  color: green !important;
  background-color: orange !important;
}
</style>