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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

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

uniapp 专栏收录该内容

4 篇文章

订阅专栏

按钮原始样式

在这里插入图片描述

修改后样式

在这里插入图片描述

修改方式

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