Open In App

Semantic-UI Button Colored Buttons Group Variations

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        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>


Output:

Semantic-UI Button Variations Colored Buttons

Semantic-UI Button Variations Colored Buttons 

Reference: https://semantic-ui.com/elements/button.html#colored-buttons



Last Updated : 08 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads