Semantic-UI Button Variations

Last Updated : 22 Apr, 2022

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks.

Semantic UI Button Group offers variation of button, there are Social buttons, different Size buttons, floated buttons, positive and negative buttons, etc.

Semantic UI Button Variations Class:

Social: This are use to create social media button for that we just need to use an icon and that social media theme color.
Size: This is use to create different size of button, like min, tiny, small, medium upto massive size buttons.
Floated: This is use to create floated button you can float your button left or right anywhere you want.
Colored: This is use to create colored button just you have to put the before the button class of the button element.
Compact: This can reduce its padding to fit into tighter spaces, this is used to create play, pause, next and previous type of buttons.
Toggle: This can be formatted to toggle on and off, subscribed and Unsubscribed etc.
Positive: This is use to create positive button that will have a defined lemon green color button.
Negative: This is use to create negative button that will have a defined lemon radish color button.
Fluid: This can take the width of its container, if you want the button to capture the width of your container this is useful.
Circular: This is use to create circular buttons.
Vertically Attached: This button can be attached to the top or bottom of other content.
Horizontally Attached: This button can be attached to the left or right of other content

Syntax: In this example we will us the Social, Size, Colored, Compact, Toggle and Floated buttons.

<button class="ui Variation-class button">...</button>

Below example will illustrate the Semantic-UI Button Variations:

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" />
        <style>
            button {
                width: 170px;
            }
            .container {
                width: 600px;
                margin-left: 10%;
            }
        </style>
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Button Variations</strong>
        </center>
        <br><br>
        <div class="container">
        <div>
            <strong>Social:</strong>
            <button class="ui facebook button">
              <i class="facebook icon"></i>
              Facebook
            </button>
            <button class="ui twitter button">
              <i class="twitter icon"></i>
              Twitter
            </button>
            <button class="ui google plus button">
              <i class="youtube plus icon"></i>
              Youtube
            </button>
        </div>
        <br>
        <div>
            <strong>Size:</strong>
                <button class="mini ui button">
                  Mini
                </button>
                <button class="large ui button">
                  Tiny
                </button>
                <button class="massive ui button">
                  Small
                </button>
        </div>
        <br>
        <div>
            <strong>Colored:</strong>
            <button class="ui red button">
                Red
            </button>
            <button class="ui green button">
                Green
            </button>
            <button class="ui purple button">
                Purple
            </button>
        </div>
        <br>
        <div>
        <strong>Compact:</strong>
        <button class="compact ui button">
          <i class="like icon"></i>
        </button>
        <button class="ui compact icon button">
          <i class="play icon"></i>
        </button>
        <button class="ui compact icon button">
          <i class="pause icon"></i>
        </button>            
        </div>
        <br>
        <div>
            <strong>Toggle:</strong>
            <button class="ui toggle button">
                Up Vote
            </button>
            <button class="ui toggle button">
                Down Vote
            </button>
        </div>
        <br>
        <div>
            <strong>Floated:</strong>
            <br>
            <button class="ui right floated button">
                Right Floated
            </button>
            <button class="ui left floated button">
                Left Floated
            </button>
        </div>
        </div>
    </body>
</html>

Output:

Example 2: In this example we will use Positive, Negative, Fluid, Circular, Vertically Attached, and Horizontally Attached 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" />
        <style>
            button {
                width: 170px;
            }
            .container {
                width: 600px;
                margin-left: 10%;
            }
        </style>
    </head>
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <strong>Semantic UI Button Variations</strong>
        </center>
        <br><br>
        <div class="container">
        <div>
            <strong>Positive:</strong>
            <button class="ui positive button">
                Positive Button
            </button>
            <strong>Negative:</strong>
            <button class="negative ui button">
                Negative Button
            </button>
        </div>
        <br>
        <div>
            <strong>Fluid:</strong>
            <button class="fluid ui purple button">
                Fluid Button
            </button>
        </div>
        <br>
        <div>
            <strong>Circular:</strong>
            <button class="ui circular twitter
                           icon button">
              <i class="twitter icon"></i>
            </button>
            <button class="ui circular linkedin
                           icon button">
              <i class="facebook icon"></i>
            </button>
            <button class="ui circular google
                           plus icon button">
              <i class="google plus icon"></i>
            </button>
        </div>
        <br>
        <div>
            <strong>Vertically Attached:</strong>
            <div class="ui top attached 
                        green button">
                Top Vertically Attached 
            </div>
            <div class="ui attached segment">
              


<p>A Computer Science Portal for Geeks</p>



            </div>
            <div class="ui bottom attached 
                        purple button">
                Bottom Vertically Attached 
            </div>
        </div>
        <br>
        <div>
            <strong>Horizontally Attached:</strong>
            <button class="ui left attached 
                           red button">
                Left Hori Attached
            </button>
            <button class="ui right attached 
                           green button">
                Right Hori Attached
            </button>
        </div>
        </div>
    </body>
</html>

Output:

Semantic-UI Button Group Variations

skyridetim

Improve

Article Tags :

Semantic-UI Button Variations

Similar Reads

Semantic-UI Button

Semantic-UI Divider

Semantic-UI Header

Semantic-UI Image

Thank You!

What kind of Experience do you want to share?