button of semantic ui

1. Basic button:

　　Use button, div, span, i and other tags, set its class to "ui button", and display the most basic button style.

<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. Set the button color

 　　You can directly add the corresponding color to the class. Note that the color value of #112233 cannot be added.

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

　　

 

3. Set the size of the button

　　Semantic provides a total of 8 size values, namely mini, tiny, small, medium, large, big, huge, massive, which increase in turn from left to right.

　　The way to set it is to add the above size value to the class.

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

　　

 

4. Setting status

　　There are two states: disable (disable effect) and active (select effect).

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