没问题，我来帮你搞定这个需求！你要的是保留图标但去掉圆形按钮外观和波纹点击效果，其实只需要调整Vuetify按钮的几个属性和样式就行，具体步骤如下：

核心调整要点 #

1. 移除icon属性：Vuetify里的icon属性会自动给按钮添加圆形的默认样式，删掉它就能摆脱圆形按钮的效果。
2. 禁用波纹动画：给v-btn加上ripple="false"属性，直接关闭按钮的点击波纹反馈。
3. 可选：优化内边距：如果希望图标和按钮边界更贴合，可以添加Vuetify的间距类（比如px-0 py-0）来消除按钮默认的内边距，让图标更紧凑。

修改后的完整代码示例 #

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <!-- 移除icon属性，添加ripple="false"，可选添加间距类优化布局 -->
        <v-btn flat color="blue lighten-2" ripple="false" class="px-0 py-0">
          <v-icon>power</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>

进阶自定义（如果需要更精细控制） #

如果还想彻底去掉按钮的hover背景或边框，可以添加自定义CSS：

/* 移除按钮hover时的背景和边框 */
.v-btn.flat.no-ripple:hover {
  background-color: transparent !important;
  border: none !important;
}

然后给按钮加上class="no-ripple"即可实现更极致的无样式图标按钮。

这样调整后，你就能得到一个仅显示图标、没有圆形按钮样式也没有波纹效果的按钮啦！

内容的提问来源于stack exchange，提问作者TheDevGuy