Semantic-UI Button Variations Horizontal Attached

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 Horizontally attached buttons.

Semantic-UI Button Variations Horizontal Attached Class:

left attached: This class is used to attached the button to the left of other content.
right attached: This class is used to attached the button to the right of other content.

Syntax:

<button class="ui Horizontal-Attached-class button">Left</button>

Below example illustrate the 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" />

    </head>

    <body>

        <center>

            <h1>Geeksforgeeks</h1>

            <strong>Semantic UI Button Variations Horizontally Attached</strong>

            <br><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>

    </body>

</html>

Output

Semantic-UI Button Variations Horizontal Attached

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

Article Tags :

CSS

Web Technologies

Semantic-UI

Semantic-UI Button