Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Semantic-UI Button Colored Variations

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


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

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



<!DOCTYPE html>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
            <strong>Semantic UI Button Variations Colored Buttons</strong>
            <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>
            <strong>Colored Button:</strong>
            <button class="ui blue button">
                <i class="icon fire"></i>
            <button class="ui violet button">
                <i class="icon bolt"></i>
            <button class="ui purple button">
                <i class="icon setting"></i>
            <button class="ui pink button">
                <i class="icon user"></i>
            <button class="ui brown button">
                <i class="icon facebook"></i>
            <button class="ui grey button">
                <i class="icon instagram"></i>
            <button class="ui black button">
                <i class="icon laptop"></i>


Sematic-UI Button Variations Colored Buttons

Semantic-UI Button Variations Colored Buttons


My Personal Notes arrow_drop_up
Last Updated : 29 Jan, 2022
Like Article
Save Article
Similar Reads
Related Tutorials