xulgrbtn按钮样式文档

查看xulgrbtn样式

样式对应代码

纯色按钮
<a class="xulgrbtn">紫色</a>
<a class="xulgrbtn xulgrbtn-lb">蓝色</a>
<a class="xulgrbtn xulgrbtn-hb">红色</a>
<a class="xulgrbtn xulgrbtn-hb2">黄色</a>
<a class="xulgrbtn xulgrbtn-lb2">绿色</a>
<a class="xulgrbtn xulgrbtn-hb3">黑色</a>
<a class="xulgrbtn xulgrbtn-bh">白色</a>

圆角按钮
<a class="xulgrbtn xulgrbtn-radius">紫色</a>
<a class="xulgrbtn xulgrbtn-lb xulgrbtn-radius">蓝色</a>
<a class="xulgrbtn xulgrbtn-hb xulgrbtn-radius">红色</a>
<a class="xulgrbtn xulgrbtn-hb2 xulgrbtn-radius">黄色</a>
<a class="xulgrbtn xulgrbtn-lb2 xulgrbtn-radius">绿色</a>
<a class="xulgrbtn xulgrbtn-hb3 xulgrbtn-radius">黑色</a>

按钮大小
<a class="xulgrbtn xulgrbtn-xg">加大</a>
<a class="xulgrbtn xulgrbtn-lg">大号</a>
<a class="xulgrbtn">默认</a>
<a class="xulgrbtn xulgrbtn-sm">小号</a>
<a class="xulgrbtn xulgrbtn-xs">迷你</a>

大小+圆角
<a class="xulgrbtn xulgrbtn-xg xulgrbtn-radius">加大</a>
<a class="xulgrbtn xulgrbtn-lg xulgrbtn-radius">大号</a>
<a class="xulgrbtn xulgrbtn-radius">默认</a>
<a class="xulgrbtn xulgrbtn-sm xulgrbtn-radius">小号</a>
<a class="xulgrbtn xulgrbtn-xs xulgrbtn-radius">迷你</a>

<a class="xulgrbtn xulgrbtn-lt" style="width:30%;">流体</a>
<a class="xulgrbtn xulgrbtn-lt xulgrbtn-radius" style="width:30%;">流体</a>


更多样式
<a class="xulgrbtn xulgrbtn-tmz">透明紫色</a>
<a class="xulgrbtn xulgrbtn-tmb">透明白色</a>
<a class="xulgrbtn xulgrbtn-tmh">透明黑色</a>
<a class="xulgrbtn xulgrbtn-tml">透明蓝色</a>
<a class="xulgrbtn xulgrbtn-tmh2">透明红色</a>
<a class="xulgrbtn xulgrbtn-tmh3">透明黄色</a>
<a class="xulgrbtn xulgrbtn-tml2">透明绿色</a>


按压样式
<a class="xulgrbtn xulgrbtn-tmz xulgrbtn-out-bz">透明紫色</a>
<a class="xulgrbtn xulgrbtn-tmb xulgrbtn-out-bh">透明白色</a>
<a class="xulgrbtn xulgrbtn-tmh xulgrbtn-out-hb">透明黑色</a>
<a class="xulgrbtn xulgrbtn-tml xulgrbtn-out-lb">透明蓝色</a>
<a class="xulgrbtn xulgrbtn-tmh2 xulgrbtn-out-hb2">透明红色</a>
<a class="xulgrbtn xulgrbtn-tmh3 xulgrbtn-out-hb3">透明黄色</a>
<a class="xulgrbtn xulgrbtn-tml2 xulgrbtn-out-lb2">透明绿色</a>

<a class="xulgrbtn xulgrbtn-out-tmbz">紫色</a>
<a class="xulgrbtn xulgrbtn-bh xulgrbtn-out-tmbh">白色</a>
<a class="xulgrbtn xulgrbtn-hb3 xulgrbtn-out-tmhb">黑色</a>
<a class="xulgrbtn xulgrbtn-lb xulgrbtn-out-tmlb">蓝色</a>
<a class="xulgrbtn xulgrbtn-hb xulgrbtn-out-tmhb2">红色</a>
<a class="xulgrbtn xulgrbtn-hb2 xulgrbtn-out-tmhb3">黄色</a>
<a class="xulgrbtn xulgrbtn-lb2 xulgrbtn-out-tmlb2">绿色</a>

图标按钮
<a class="xulgrbtn xulgrbtn-lb2"><i class="xulgricon">&#xe633;</i></a>
<a class="xulgrbtn xulgrbtn-tml2 xulgrbtn-out-lb2"><i class="xulgricon">&#xe633;</i></a>
<a class="xulgrbtn xulgrbtn-lb"><i class="xulgricon">&#xe631;</i></a>
<a class="xulgrbtn xulgrbtn-tml xulgrbtn-out-lb"><i class="xulgricon">&#xe631;</i></a>
<a class="xulgrbtn"><i class="xulgricon">&#xe619;</i></a>
<a class="xulgrbtn xulgrbtn-tmz xulgrbtn-out-bz"><i class="xulgricon">&#xe619;</i></a>

 

引入CSS

<link rel="stylesheet" href="https://code.xulgr.com/css/btn/xulgrbtn/?xulgricon">

 

兼容html常用标签

a

button

dd

div

dl

dt

form

h1-h6

input

li

ol

p

pre

td

textarea

th

ul

 

注：
1.样式中图标按钮需引入iconfont项目css，详见：

点击查看

2.如果你的原标签有样式冲突，可使用其他标签，如a标签冲突，可在<a></a>内使用<dd></dd>标签，在dd标签内加入对应css样式即可