Semantic-UI Button Variations Vertically Attached

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

Semantic-UI Button Variations Vertically Attached Class:

top attached: This class is used to attach the button on top of the segment.
bottom attached: This class is used to attach the button on bottom of the segment.

Syntax:

<div class="ui top attached button">..</div>
<div class="ui ...">
  <p></p>
</div>
<div class="ui bottom attached button">..</div>

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 Vertically Attached</strong>
            <br><br>
        <div>
            <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>
        </div>
        </center>
    </body>
</html>