How to remove v-btn background in vuetify?

user_10932853 0
Viewed 19225

How do I remove the background behind the button when I hover or clicking on the v-btn?

I try to set ripple to false, but still have background. I can't find the css does this background.

enter image description here 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.15/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.15/dist/vuetify.min.js"></script>



<div id="app">
  <v-app id="inspire">
    <v-card flat>
      <v-card-text>
        <v-container fluid class="pa-0">
          <v-row>
            <v-col cols="12">
              <p>Normal</p>
            </v-col>
  
            <v-col cols="12" sm="3">
              <v-btn ripple="false" icon color="pink">
                <v-icon>mdi-heart</v-icon>
              </v-btn>
            </v-col>
  
          </v-row>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>

vuetify.js vue.js
4 Answers

For the background when click (ripple features) , you missing the bind annotation, you are passing the string instead of false value. So put the ":" before ripple will do the job.

However, to do with the hover background things, you need to do some hack in css. I'm writing this in scss, you can follow the idea 

<v-btn :ripple="false" icon color="pink" id="no-background-hover">
  <v-icon>mdi-heart</v-icon>
 </v-btn>


<style lang="scss">
#no-background-hover::before {
   background-color: transparent !important; <= can set to any color you want
}
</style>

the code above is only set to that specific button with id "no-background-hover" only, if you want this to happen to every other button. Then here is the class of that button, you can change your css query selector to the class level you need

<button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default pink--text" id="no-background"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-heart theme--light"></i></span></button>
user_83287850

I was looking for an answer to this question for some time, I applied a hacked solution from here, but it has visual effects, Thank God I found a property that is responsible for this. You need to add a "plain" property to the button like this:

<v-btn fab large plain><v-icon>mdi-phone</v-icon></v-btn>

This was made a deal for me. Vuetify guide saying: plain buttons have a lower baseline opacity that reacts to hover and focus.

user_82653160

To take out the background on v-btn, you can use the following css property,

<style scoped>
.v-btn::before {
  background-color: transparent;
}
</style>

to remove the ripple effect, you have to use v-ripple,

<v-btn v-ripple="false" icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
user_140005680

Adding the plain prop should do the trick. According the description it will remove "the default background change applied when hovering over a button": enter image description here

*Wanted to simplify the previous answer, but the edit queue was full.

user_115968110
Related