Button

按钮。Button UI 提供与WeLink规范一致的视图。 按钮的类型包括：页面主操作、页面次要操作、警告类操作和页面一般操作。

效果示例

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">Button</h1>
        <p class="page__desc">按钮</p>
    </div>
    <div class="page__bd page__bd_spacing" style="height: 1000px;">
        <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
        <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>


        <div id="btns" class="weui-btn-area_fixed">
            <a href="javascript:;" class="weui-btn weui-btn_default">取消</a>
            <a href="javascript:;" class="weui-btn weui-btn_primary">确定</a>
        </div>
        <div id="sureBtn" class="weui-btn-area_fixed__spacing">
            <a href="javascript:;" class="weui-btn weui-btn_primary">确定</a>
        </div>

        <div id="deleteBtn" class="weui-btn-area_fixed__spacing">
            <a href="javascript:;" class="weui-btn weui-btn_warn">删除</a>
        </div>
        <div id="spacingBtns" class="weui-btn-area_fixed__spacing">
            <a href="javascript:;" class="weui-btn weui-btn_default">取消</a>
            <a href="javascript:;" class="weui-btn weui-btn_primary">确定</a>
        </div>

        <div class="page__bd page__bd_spacing button-sp-area__item">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_plain-primary weui-btn_plain__sm">四字按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_plain-default weui-btn_plain__sm">四字按钮</a>
        </div>

        <div class="page__bd page__bd_spacing button-sp-area__item">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
        </div>

        <div class="button-sp-area button-sp-area__item">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_plain-primary weui-btn_plain__sm">
                <span class="weui-btn_mini__icon">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjYgKDY3NDkxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT7liIfniYc8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iMTXmjInpkq4oYnV0dG9u77yJIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i57uE5Lu2L+W3peS9nOWPsC/ml6XljobljaHniYcvaWNvbuinhumikSI+CiAgICAgICAgICAgIDxnIGlkPSJQYWdlLTEiPgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBvcGFjaXR5PSIwLjMwMDAwMDAxMiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMS41ODU4MTcwNywxMiBDMS4yNjMwNDEzLDEyIDEsMTEuNzMyNzY0NCAxLDExLjQwMzY1MzggTDEsNC41OTYzNDYxOCBDMSw0LjI2NzIzNTYzIDEuMjYzMDQxMyw0IDEuNTg1ODE3MDcsNCBMMTEuMjcwMjYzMSw0IEMxMS41OTMwMzg4LDQgMTEuODU2MDgwMSw0LjI2NzIzNTYzIDExLjg1NjA4MDEsNC41OTYzNDYxOCBMMTEuODU2MDgwMSw1Ljk3NDEyOTg4IEwxNC4xNDAxMzc5LDUuMDc5MjU1MDEgQzE0LjE5Nzc3NjQsNS4wMzg3MTYyNyAxNSw0LjU2MzgwODUxIDE1LDQuODkyMzg1NjUgTDE1LDExLjIzNDAzMTIgQzE1LDExLjU2MzY3NTIgMTQuMTk3Nzc2NCwxMS4wODgyMzQgMTQuMTAzOTgyOCwxMS4wMjg0OTI3IEwxMS44NTYwODAxLDEwLjAyMjY2OTcgTDExLjg1NjA4MDEsMTEuNDAzNjUzOCBDMTEuODU2MDgwMSwxMS43MzI3NjQ0IDExLjU5MzAzODgsMTIgMTEuMjcwMjYzMSwxMiBMMS41ODU4MTcwNywxMiBaIiBpZD0iRmlsbC0xIiBmaWxsPSIjMDM5QkU1Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="
                    style="display: inline-block; vertical-align: middle;"
                    />
                </span>
                <span>加入会议</span>
            </a>
        </div>
        <a href="javascript:;" class="weui-btn weui-btn_middle weui-btn_primary">中等按钮 Normal</a>
        <a href="javascript:;" class="weui-btn weui-btn_middle weui-btn_warn">中等按钮 Warn</a>
        <a href="javascript:;" class="weui-btn weui-btn_middle weui-btn_transparent">我知道了</a>
        <div style="text-align: center; font-size: 18px; font-weight: 600; color: #f36f64;">底部悬浮按钮</div>
        <div class="page__bd page__bd_spacing button-sp-area__item">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_plain-primary weui-btn_plain__sm" onclick="clickBtns('spacingBtns')">有间距双按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_plain-primary weui-btn_plain__sm" onclick="clickBtns('btns')">无间距双按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_plain-primary weui-btn_plain__sm" onclick="clickBtns('sureBtn')">确定单按钮</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_plain-primary weui-btn_plain__sm" onclick="clickBtns('deleteBtn')">删除单按钮</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    function clickBtns(type){
        $('#spacingBtns').css('display','none');
        $('#btns').css('display','none');
        $('#sureBtn').css('display','none');
        $('#deleteBtn').css('display','none');
        $('#'+type).css('display','flex');
    }
</script>