semantic ui 之 按钮

1、基础按钮：

　　使用button、div、span、i等标签，将其class设置为"ui button"，显示的就是最基础的按钮样式。

<i class="ui button">i按钮</i>
<div class="ui button">div按钮</div>
<span class="ui button">span按钮</span>
<button class="ui button">button按钮</button>

　　

2、设置按钮颜色

 　　直接在class中加对应的颜色即可，注意不能加#112233这种颜色值。

<i class="ui red button">red 按钮</i>
<i class="ui blue button">blue 按钮</i>

　　

3、设置按钮的大小

　　semantic一共提供了8种大小值，分别是mini、tiny、small、medium、large、big、huge、massive，从左到右依次增大。

　　设置的方式是在class中加上面的大小值即可。

<i class="ui red medium button">red medium 按钮</i>
<i class="ui blue mini button">blue mini 按钮</i>

　　

4、设置状态

　　状态有disable（禁用效果）、active（选中效果）两种

<i class="ui button">基础按钮</i>
<i class="ui active button">active按钮</i>
<i class="ui disabled button">disabled按钮</i>