weui/src/example/button/button_default.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">Button</h1>
        <p class="page__desc">按钮</p>
    </div>
    <div class="page__bd">

        <div class="button-sp-area">
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
          <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
          <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
          <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
        </div>

        <div class="button-sp-area">
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary"><span class="weui-btn__inner">按钮宽度</span></a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary"><span class="weui-btn__inner">按钮宽度自适应内容</span></a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary"><span class="weui-btn__inner">按钮宽度自适应内容，达到最大值后折行，最大行数两行的示例</span></a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><span class="weui-btn__inner"><i class="weui-mask-loading"></i>按钮宽度自适应内容</span></a>
          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><span class="weui-btn__inner"><i class="weui-mask-loading"></i>按钮宽度自适应内容，达到最大值后折行，最大行数两行的示例</span></a>
        </div>

        <div class="button-sp-area">
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_medium">medium 按钮</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_medium">medium 按钮</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_medium">medium 按钮</a>
        </div>

        <div class="button-sp-area overlay">
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay">overlay 按钮</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay">overlay 按钮</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay">overlay 按钮</a>
        </div>
        <div class="button-sp-area overlay">
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
        </div>

        <div class="button-sp-area cell">
          <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-default">普通行按钮</a>
          <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-primary">强调行按钮</a>
          <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-primary">
            <img alt="icon" class="weui-btn_cell__icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=">
            强调行按钮
          </a>
          <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-warn">警示行按钮</a>
        </div>

        <div class="button-sp-area">
            <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_primary weui-wa-hotarea">按钮</a>
            <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">按钮</a>
            <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_warn weui-wa-hotarea">按钮</a>
        </div>
    </div>
</div>