Semantic-UI Button Colored Buttons Group Variations

I think the title is little confusing it can be Semantic-UI Button Variations Colored Buttons if this the element https://semantic-ui.com/elements/button.html#colored-buttons

Semantic UI Button Group also offers group variation of buttons, there are Icon buttons, labeled icon buttons, mixed group buttons, equal width, colored button, basics buttons and Group sizes buttons, etc.

In this article we will discussed about the Colored Buttons. Colored Buttons can have a shared color, here we can create simple button group that will follow a fixed color button, each button will be same inside of that group.

Semantic-UI Button Variations Colored Buttons Class:

color-name*: This i the variable, you can just place the color name in the div element to color the whole group in a single color.

Syntax:

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

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

Example 1: In this example we will apply the group color on Normal button and basic buttons. You can apply color on any group of buttons.

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>

        </center>

        <br><br>

        <strong>Coloured Buttons:</strong>

        <br>

        <div class="ui blue buttons">

          <button class="ui button">Like</button>

          <button class="ui button">Share</button>

          <button class="ui button">Subscribe</button>

        </div>

        <br>

        <strong>Coloured basic buttons:</strong>

        <br>

        <div class="ui blue basic buttons">

          <button class="ui button">Like</button>

          <button class="ui button">Share</button>

          <button class="ui button">Subscribe</button>

        </div>

    </body>

</html>