Rain CSS

使用css2的按钮

这一部分的按钮例子使用css2来创建样式,可以使用w-数值来改变宽度,也可以使用h-数值来改变高度.

Buttons with CSS2

This part buttons example use css2.The button has only use special class w-number change width or use h-number change height.

默认按钮 Default Buttons

按钮示例 Sample Buttons 

<input type="button" value="button"/>


<input type="button" class="h-2 lh-2" value="button" />


<input type="button" class="h-4 lh-4" value="button" />


<input type="button" class="hs ws" value="button" />


<input type="button" class="heightM widthM" value="button" />


<input type="button" class="hl widthL" value="button" />



<input type="button" class="hll wll" value="button" />


<input type="button" class="h-4 w-4 " value="button" />


<input type="button" class="h-8 w-8 " value="button" />


<input type="button" class="h-12 w-12 " value="button" />


<input type="button" class="h-16 w-16 " value="button" />

CSS3按钮

这部分的按钮添加css3特效,添加圆角,渐变,边框线和颜色相关的样式类

Buttons with CSS3

This part buttons add css3 effects,add the round,gradient,border,and color related classes

CSS3按钮 CSS3 Buttons

按钮示例 Sample Buttons 

<input type="button" class="hs rounds ggrey bgrey_2 btn greybtn" 
value="button" />


<input type="button" class="heightM rounds gb btn bluebtn" 
value="button" />


<input type="button" class="hl rounds gg btn greenbtn" 
value="button" />


<input type="button" class="hll rounds gr btn redbtn" 
value="button" />


<input type="button" class="hll rounds gc btn cyanbtn" 
value="button" />


<input type="button" 
class="h-5  rounds gy btn yellowbtn" 
value="button" />


<input type="button" 
class="hs ws rounds ggrey bgrey_2 btn greybtn" 
value="button"/>


<input type="button" class="heightM widthM rounds gb btn bluebtn" 
value="button"/>


<input type="button" class="hl widthL rounds gg btn greenBtn" 
value="button"/>



<input type="button" class="hll widthLL rounds gr btn redbtn" 
value="button"/>


<input type="button" 
class="h-5 w-16  rounds gc btn cyanbtn" 
value="button"/>


<input type="button" class="h-6 w-20  rounds gy btn yellowbtn" 
value="button"/>
下拉菜单按钮 Dropdown Buttons 
<button class="posr ps rounds ggrey borderGrey_2 btn greybtn">
	button
	<span class="triangleTopGrey 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="triangleTopWhite 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.

Buttons for Mobile

This part buttons are use for mobile device,like phone and pad.

移动端按钮 Buttons for Mobile

基本按钮 Basic Buttons

button


button


button


button


button


button

带图标的基本按钮 Basic Buttons with icon

button


button

内联按钮 Inline Buttons

button button button button button button

带图标的内联按钮 Inline Buttons with Icon

button button button button button button

垂直按钮组 Vertical buttons group
button button button
button button button
button button button
水平按钮组 Horizontal buttons group
button button button