消除图标按钮上的波纹效果答案

【问题标题】：remove ripple effect on icon button消除图标按钮上的波纹效果
【发布时间】：2020-03-19 12:08:52
【问题描述】：

我需要一个图标来完成按钮的工作（加载）但是我会去掉这个图标的圆形按钮效果

我该怎么做？ 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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

找到它兄弟，使用这两个 CSS 就可以了：

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

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

让我知道它是否有效，如果无效，将进一步帮助您

【讨论】：

很高兴帮助好友@TheDevGuy，有趣的是这是我第一次了解vuetify.js

【解决方案2】：

只是

v-ripple="false"

https://vuetifyjs.com/en/directives/ripple/#usage

【讨论】：

【解决方案3】：

你好试试这个代码希望它会帮助你：-

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

【讨论】：

不，我只想要图标而不是圆圈效果

【解决方案4】：

我想这会对你有所帮助！！！

添加这个 CSS

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

让我知道这是否有效

【讨论】：

以及在点击过程中消除波纹？
我正在检查

【解决方案5】：

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

【讨论】：

很好奇为什么这被否决了，因为它在 codepen 中工作并且不使用 !important，这通常是一种反模式。