How to remove v-btn background in vuetify?

Question

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.

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/[email protected]/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/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answer 1

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>

Answer 2

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>