CODEWITHSUNDEEP
vue.jsvuetify.js
Jon Sud
Jon Sud

Reputation: 11641

How to remove v-btn background in vuetify?

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/[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>

Upvotes: 8

Views: 31618

Answers (4)

TwoFingerRightClick
TwoFingerRightClick

Reputation: 832

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.

Upvotes: 2

Andrew Zagarichuk
Andrew Zagarichuk

Reputation: 509

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.

Upvotes: 11

deirdreamuel
deirdreamuel

Reputation: 847

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>

Upvotes: 5

Jake Lam
Jake Lam

Reputation: 3452

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>

Upvotes: 15

Related Questions