Semantic-UI Button Variations Circular Buttons

Last Updated : 08 Feb, 2022

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