Semantic-UI Button Colored Variations

Last Updated : 29 Jan, 2022

Semantic UI Button offers several types of micro button components like Types, Groups, Content, States, Variations, and Group Variations.

The Button variations have different kinds of buttons such as Social, Different Size, Floated, Colored, Compact, Toggle, Positive, Negative, Fluid, Circular, Vertically and Horizontally attached buttons. In this article, we will learn about the Semantic-UI Button Variations Colored Button, where we can set the color as we want.

Semantic-UI Button Variations Colored Buttons Class:

color-name: This is not a class it is represented as a variable that can be any name of the color. Color name can be blue, green, red, etc.

Syntax:

<button class="ui color-name button">
...
</button>

Below example illustrates the Semantic-UI Button Variations Colored Buttons:

Example:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic UI</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    </head> 
    <body> 
        <center> 
            <h1>Geeksforgeeks</h1> 
            <strong>Semantic UI Button Variations Colored Buttons</strong> 
            <br><br> 
            <strong>Colored Icon Button:</strong> 
            <button class="ui red button">Red</button> 
            <button class="ui orange button">Orange</button> 
            <button class="ui yellow button">Yellow</button> 
            <button class="ui olive button">Olive</button> 
            <button class="ui green button">Green</button> 
            <button class="ui teal button">Teal</button> 
            <br><br> 
            <strong>Colored Button:</strong> 
            <button class="ui blue button"> 
                <i class="icon fire"></i> 
            </button> 
            <button class="ui violet button"> 
                <i class="icon bolt"></i> 
            </button> 
            <button class="ui purple button"> 
                <i class="icon setting"></i> 
            </button> 
            <button class="ui pink button"> 
                <i class="icon user"></i> 
            </button> 
            <button class="ui brown button"> 
                <i class="icon facebook"></i> 
            </button> 
            <button class="ui grey button"> 
                <i class="icon instagram"></i> 
            </button> 
            <button class="ui black button"> 
                <i class="icon laptop"></i> 
            </button> 
        </center> 
    </body> 
</html>