ColorUI/demo/pages/basics/button/button.wxml

<custom style="height:{{CustomBar}}px;">
  <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
      <text class='icon-back'></text> 按钮
    </navigator>
    <navigator class='action' url='design' hover-class="none">
      <text class='icon-skinfill'></text>
      <text class="text-df">设计</text>
    </navigator>
  </bar>
</custom>
<bar>
  <view class='action'>
    <text class='icon-title text-blue'></text>按钮形状
  </view>
</bar>
<view class="padding flex flex-wrap justify-between align-center">
  <button>默认</button>
  <button class='round'>圆角</button>
  <button class='icon'>
    <text class='icon-emojifill'></text>
  </button>
</view>
<bar class="margin-top ">
  <view class='action'>
    <text class='icon-title text-blue'></text>按钮尺寸
  </view>
</bar>
<view class="padding flex flex-wrap justify-between align-center">
  <button class='round sm'>小尺寸</button>
  <button class='round'>默认</button>
  <button class='round lg'>大尺寸</button>
</view>
<bar class="margin-top ">
  <view class='action'>
    <text class='icon-title text-blue'></text>按钮颜色
  </view>
  <view class='action'>
    <text class='text-df'>阴影</text>
    <switch class='sm' bindchange='SetShadow'></switch>
  </view>
</bar>
<view class='grid col-5 padding-sm'>
  <view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
    <button class='round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
  </view>
</view>
<bar class="margin-top ">
  <view class='action'>
    <text class='icon-title text-blue'></text>镂空按钮
  </view>
  <view class='action'>
    <radio-group bindchange='SetBorderSize'>
      <label class='margin-left-sm'>
        <radio class='blue sm radio' value='' checked></radio>
        <text> 小</text>
      </label>
      <label class='margin-left-sm'>
        <radio class='blue sm radio' value='s'></radio>
        <text> 大</text>
      </label>
    </radio-group>
  </view>
</bar>
<view class='grid col-5 padding-sm'>
  <view class='margin-tb-sm text-center' wx:for="{{ColorList}}">
    <button class='round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
  </view>
</view>
<bar class="margin-top ">
  <view class='action'>
    <text class='icon-title text-blue'></text>块状按钮
  </view>
</bar>
<view class="padding flex flex-direction">
  <button class='bg-grey lg'>玄灰</button>
  <button class='bg-red margin-tb-sm lg'>嫣红</button>
</view>
<bar class="margin-top ">
  <view class='action'>
    <text class='icon-title text-blue'></text>无效状态
  </view>
</bar>
<view class="padding">
  <button class='block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
  <button class='block line-blue margin-tb-sm lg' disabled>无效状态</button>
</view>
<bar class="margin-top ">
  <view class='action'>
    <text class='icon-title text-blue'></text>按钮加图标
  </view>
</bar>
<view class="padding-xl">
  <button class='block line-orange lg'>
    <text class='icon-upload'></text> 图标</button>
  <button class='block bg-blue margin-tb-sm lg'>
    <text class='icon-loading2 iconfont-spin'></text> 加载</button>
  <button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
</view>