Semantic UI | Buttons
To create a Semantic Ui | button, simply add ui button class to the <button> element base class.
Source Code
<button class="ui button">Follow</button>
Source Code: Output
Basic Button
To create semantic ui basic button ,add ui basic button class to the <button> element base class.
Source Code
<button class="ui basic button"> Basic Button</button>
Source Code: Output
Outline Button
To create semantic ui outline button add one of the class from {primary | secondary | positive | negative} followed by ui basic button class to the <button> element base class.
General Syntax
<button class="ui {primary | secondary | positive | negative} basic button">Outline Button</button>
Source Code
<button class="ui primary basic button">Primary</button>
<button class="ui secondary basic button">Secondary</button>
<button class="ui positive basic button">Positive</button>
<button class="ui negative basic button">Negative</button>
Source Code: Output
Different Color Button
To create different color button, add specific color name as a class followed by ui basic button class.
It is clear that, you can create different color button by adding ui {specific color name i.e red} basic button class to the <button> element base class.
Source Code
<button class="ui red basic button">Red</button>
<button class="ui orange basic button">Orange</button>
<button class="ui yellow basic button">Yellow</button>
<button class="ui olive basic button">Olive</button>
Source Code: Output
Button Groups
To create button group, wrap all the buttons inside the container having class ui buttons.
General Syntax
<element class="ui buttons">
<button class="ui button">Button 1</button>
<button class="ui button">Button 2</button>
</element>
Source Code
<div class="ui buttons">
<button class="ui red button">Button 1</button>
<button class="ui gray button">Button 2</button>
<button class="ui yellow button">Button 3</button>
</div>
Source Code: Output
Web Tutorials
