Semantic-UI Button Floated Variations

Last Updated : 06 Feb, 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 predefined CSS and jQuery to incorporate different frameworks.

Semantic-UI Button Variations offers us so many variations in buttons like social, size, floated, colored, compact, toggle, positive, negative, fluid, circular, vertical, and horizontal attached buttons. In this article, we will discuss the Floated variation. Semantic UI Button Floated variations are used to create a floating button on different sides.

Semantic UI Button Floated variations class:

left floated: This class is used to make the button left floated.
right floated: This class is used to make the button right floated.

Syntax:

<button class="ui left floated button">
    ....
</button>

Example: The below example illustrates the Semantic UI Button floated variant. In this example, we will create 2 pairs of buttons that will be floated left and right sides of the screen. One pair will be normal buttons and the other pair will be a basic button. You can apply floated variant on any type of button.

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> 
            .container { 
                margin-left: 5px; 
                margin-right: 5px; 
            } 
        </style> 
    </head> 
    <body> 
        <center> 
            <h1 style="color:green">GeeksforGeeks</h1> 
            <strong>Semantic-UI Button Floated Variations</strong> 
        </center> 
        <br><br> 
        <div class="container"> 
            <strong>Floated Variant Normal buttons:</strong> 
            <br> 
            <button class="ui right floated green button"> 
                Right Floated 
            </button> 
            <button class="ui left floated green button"> 
                Left Floated 
            </button> 
            <br><br> 
            <strong>Floated Variant Basic buttons:</strong> 
            <br> 
            <button class="ui right floated green basic button"> 
                Right Floated 
            </button> 
            <button class="ui left floated green basic button"> 
                Left Floated 
            </button> 
        </div> 
    </body> 
</html> 