按鈕 - 頁面元素

                    向任意HTML元素設定class="layui-btn",建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。內置的按鈕class可以進行任意組合,從而形成更多種按鈕風格。
                    <button type="button" class="layui-btn">一個標準的按鈕</button>
                    <a href="http://www.fk434.com" class="layui-btn">一個可跳轉的按鈕</a>
                          

                    名稱 組合
                    原始 class="layui-btn layui-btn-primary"
                    默認 class="layui-btn"
                    百搭 class="layui-btn layui-btn-normal"
                    暖色 class="layui-btn layui-btn-warm"
                    警告 class="layui-btn layui-btn-danger"
                    禁用 class="layui-btn layui-btn-disabled"

                    尺寸 組合
                    大型 class="layui-btn layui-btn-lg"
                    默認 class="layui-btn"
                    小型 class="layui-btn layui-btn-sm"
                    迷你 class="layui-btn layui-btn-xs"

                    尺寸 組合
                    大型百搭 class="layui-btn layui-btn-lg layui-btn-normal"
                    正常暖色 class="layui-btn layui-btn-warm"
                    小型警告 class="layui-btn layui-btn-sm layui-btn-danger"
                    迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled"
                          
                    <button type="button" class="layui-btn layui-btn-fluid">流體按鈕(最大化適應)</button>
                          

                    主題 組合
                    原始 class="layui-btn layui-btn-radius layui-btn-primary"
                    默認 class="layui-btn layui-btn-radius"
                    百搭 class="layui-btn layui-btn-radius layui-btn-normal"
                    暖色 class="layui-btn layui-btn-radius layui-btn-warm"
                    警告 class="layui-btn layui-btn-radius layui-btn-danger"
                    禁用 class="layui-btn layui-btn-radius layui-btn-disabled"

                    尺寸 組合
                    大型百搭 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
                    小型警告 class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
                    迷你禁用 class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

                    哈哈哈哈哈,這組合名長得簡直沒朋友~

                    <button type="button" class="layui-btn">
                      <i class="layui-icon">&#xe608;</i> 添加
                    </button>
                     
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                      <i class="layui-icon">&#x1002;</i>
                    </button>
                          

                    溫馨提示:各種圖標字體請移步文檔左側【頁面元素 - 圖標】閱覽

                    將按鈕放入一個class="layui-btn-group"元素中,即可形成按鈕組,按鈕本身仍然可以隨意搭配

                    <div class="layui-btn-group">
                      <button type="button" class="layui-btn">增加</button>
                      <button type="button" class="layui-btn">編輯</button>
                      <button type="button" class="layui-btn">刪除</button>
                    </div>
                          
                    <div class="layui-btn-group">
                      <button type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon">&#xe654;</i>
                      </button>
                      <button type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon">&#xe642;</i>
                      </button>
                      <button type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon">&#xe640;</i>
                      </button>
                      <button type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon">&#xe602;</i>
                      </button>
                    </div>
                     
                    <div class="layui-btn-group">
                      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                        <i class="layui-icon">&#xe654;</i>
                      </button>
                      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                        <i class="layui-icon">&#xe642;</i>
                      </button>
                      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                        <i class="layui-icon">&#xe640;</i>
                      </button>
                    </div>
                          
                    按鈕容器

                    盡管按鈕在同節點并排時會自動拉開間距,但在按鈕太多的情況,效果并不是很美好。因為你需要用到按鈕容器

                    <div class="layui-btn-container">
                      <button type="button" class="layui-btn">按鈕一</button> 
                      <button type="button" class="layui-btn">按鈕二</button> 
                      <button type="button" class="layui-btn">按鈕三</button> 
                    </div>
                        

                    你是否發現,主題、尺寸、圖標、圓角的交叉組合,可以形成難以計算的按鈕種類。另外,你可能最關注的是配色,Layui內置的六種主題的按鈕顏色都是業界常用的標準配色,如果他們仍然無法與你的網站契合,那么請先允許我“噗”一聲。。。然后你就大膽地自擼一個顏色吧!比如:粉紅色或者菊花色(一個有味道的顏色)

                    layui - 用心與你溝通

                    亚洲图色