Search code examples
vue.jsvuetify.js

remove ripple effect on icon button


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>

Solution

  • 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