Semantic-UI Button Variations Vertically 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 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>w3wiki</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 Beginner</p> </div> <div class="ui bottom attached purple button"> Bottom Vertically Attached </div> </div> </div> </center> </body></html> |
Output:
Semantic-UI Button Variations Vertically Attached
Reference: https://semantic-ui.com/elements/button.html#vertically-attached
Contact Us