【uniapp】微信小程序修改按钮样式

原创已于 2025-10-15 16:54:13 修改 · 377 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

uniapp

当前文章被收录于：

uniapp

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2025-10-15 16:52:39 首次发布

按钮原始样式

在这里插入图片描述

修改后样式

在这里插入图片描述

修改方式

<template>
  <button
    class="share-btn-box"
    style="margin-top: 8rpx;"
    open-type="share"
    @click.stop="shareRecord(item.record.id)"
  >
    <text class="iconfont icon-link" style="margin-right: 6rpx;" />
    分享录音
  </button>
</template>
<style lang=less>
.share-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  color:#20c483 ;
  font-size: 28rpx;
  background: rgba(255,255,255,0.8);
}
button{
  &::after{
    border: none !important;
  }
}
</style>