Semantic UI | Buttons

Semantic UI | Buttons

To create semantic ui button, simply add ui button class to the <button> element base class.

General Syntax

Source Code

Try it now

Source Code : Output

Basic Button

To create semantic ui basic button ,add ui basic button class to the <button> element base class.

General Syntax

Source Code

Try it now

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

Source Code

Try it now

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.

General Syntax

Source Code

Try it now

Source Code : Output