这一部分的按钮例子使用css2来创建样式,可以使用w-数值来改变宽度,也可以使用h-数值来改变高度.
This part buttons example use css2.The button has only use special class w-number change width or use h-number change height.
<input type="button" value="button"/> <input type="button" class="h-2" value="button" /> <input type="button" class="h-3" value="button" /> <input type="button" class="hs ws" value="button" /> <input type="button" class="hm wm" value="button" /> <input type="button" class="hl wl" value="button" /> <input type="button" class="hll wll" value="button" />
这部分的按钮添加css3特效,添加圆角,渐变,边框线和颜色相关的样式类
This part buttons add css3 effects,add the round,gradient,border,and color related classes
<input type="button" class="hs rounds ggrey bgrey_2 btn greybtn" value="button" /> <input type="button" class="hl rounds gb btn bluebtn" value="button" /> <input type="button" class="hl rounds gg btn greenbtn" value="button" /> <input type="button" class="hl rounds gr btn redbtn" value="button" /> <input type="button" class="hl rounds gc btn cyanbtn" value="button" /> <input type="button" class="hl rounds gy btn yellowbtn" value="button" />
<input type="button" class="hl ws rounds ggrey bgrey_2 btn greybtn" value="button"/> <input type="button" class="hl wm rounds gb btn bluebtn" value="button"/> <input type="button" class="hl wl rounds gg btn greenBtn" value="button"/> <input type="button" class="hl wll rounds gr btn redbtn" value="button"/> <input type="button" class="hl w-15 rounds gc btn cyanbtn" value="button"/> <input type="button" class="h-6 w-16 rounds gy btn yellowbtn" value="button"/>
<button class="posr ps rounds ggrey borderGrey_2 btn greybtn"> button <span class="trianglegt mts mls ib"></span> </button> <ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey"> <li> <a class="hoverb hovercw block ps tdn" href="#">Action</a> </li> ... <li class="bt"> <a class="hoverb hovercw block ps tdn" href="#">Separated link</a> </li> </ul>
<button class="posr ps rounds ggrey borderGrey_2 btn greybtn"> button <span class="trianglewt mts mls ib"></span> </button> <ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey"> <li> <a class="hoverb hovercw block ps tdn" href="#">Action</a> </li> ... <li class="bt"> <a class="hoverb hovercw block ps tdn" href="#">Separated link</a> </li> </ul>
<div class="posr clearfix"> <button class="posr br ib l ps roundls gb btn bluebtn"> Action </button> <button class="posr nobl ib l ps roundrs gb btn bluebtn"> <span class="triangleTopWhite ib"></span> </button> </div> <ul class="nolp pts pbs mts lsn bottom w-25 last border rounds sogrey"> <li> <a class="hoverb hovercw block ps tdn" href="#">Action</a> </li> ... <li class="bt"> <a class="hoverb hovercw block ps tdn" href="#">Separated link</a> </li> </ul>
这部分的按钮用于移动设备,如手机和pad.
This part buttons are use for mobile device,like phone and pad.
button
button
button button button button button button
button button button button button button