Skip to content
Related Articles

Related Articles

Semantic-UI Button Variations Circular Buttons

Improve Article
Save Article
  • Last Updated : 08 Feb, 2022
Improve Article
Save Article

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

The Button variations have different kind 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 circular variation of buttons. 

Semantic-UI Button Variations Circular Class:

  • circular: This class is used to make any button circular:

Syntax:

<button class="ui circular ... button ">
  <i class="icon ..."></i>
</button>

Below example illustrate the Button Variations Circular:

Example:

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Button Variations Circular</strong>
            <br><br>
        <div>
            <strong>Social Circular Buttons:</strong>
            <button class="ui circular facebook icon button">
              <i class="facebook icon"></i>
            </button>
            <button class="ui circular linkedin icon button">
              <i class="linkedin icon"></i>
            </button>
            <button class="ui circular youtube icon button">
              <i class="youtube  icon"></i>
            </button>
            <br><br>
            <strong>Basic Circular Buttons:</strong>
            <button class="circular ui icon
                           basic green button">
                <i class="icon leaf"></i>
            </button>
            <button class="circular ui icon
                           basic blue button">
                <i class="icon bolt"></i>
            </button>
            <button class="circular ui icon
                           basic yellow button">
                <i class="icon fire"></i>
            </button>
            <br><br>
            <strong>Normal circular Buttons:</strong>
            <button class="ui circular green button">
              Follow
            </button>
            <button class="ui circular red button">
              Delete
            </button>
            <button class="ui circular blue button">
              Add
            </button>
            <br><br>
        </div>
        </center>
    </body>
</html>


Output

Semantic-UI Button Variations Circular Buttons

Semantic-UI Button Variations Circular Buttons

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!