Skip to content
Related Articles

Related Articles

Semantic-UI Button Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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

Semantic-UI Button Variations

Semantic-UI Button Variations

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

Semantic-UI Button Variations


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!