remove ripple effect on icon button

Viewed 4656

I need to have an icon who make the button's job ( loading ) But I would remove this round button effect of this icon

How can I do this ? https://codepen.io/sebastiancz/pen/gOpjbar?editors=1010

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <v-btn flat icon color="blue lighten-2">
          <v-icon>power</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>
5 Answers

find it brother, use these both CSS and it will do the trick :

.v-btn:before {
  opacity: 0 !important;
}

.v-ripple__container {
  opacity: 0 !important;
}

let me know if it works or not, will help you further if it won't

hi try this code hope it will help you:-

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <v-btn color="blue lighten-2">
          <v-icon>power</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>

i think this will will help you!!!

add this CSS

.v-btn:before {
  opacity: 0 !important;
}

let me know if this works or not

.v-btn:hover:before { background-color: transparent }
Related