Open In App

Semantic-UI Button Fluid Variations

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI Button offers several types of micro button components like Types, Groups, Content, States, Variations, and Group Variations.

The different button variations are Social, Different Size, Floated, Colored, Compact, Toggle, Positive, Negative, Fluid, Circular, Vertically and Horizontally attached buttons. 

In this article, we will learn about the fluid variation of buttons. A fluid button can take the width of its container

Semantic UI Button Fluid Variations Fluid Class:

  • fluid: This class is used to create a button that will take the full width of its container.

Syntax:

<button class="fluid ui button">
   ...
</button>

Example: In this example, we will create fluid buttons and basic fluid icon buttons.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1 style="color:green">GeeksforGeeks</h1>
            <strong>Semantic UI Button Fluid Variation</strong>
            <br><br>
            <strong>Fluid Button:</strong>
            <button class="fluid ui blue button">
                Go to Cart
            </button>
            <br>
            <button class="fluid ui green button">
                Place Order
            </button>
            <br><br>
            <strong>Fluid Icon Button:</strong>
            <button class="fluid ui icon basic blue button">
                <i class="icon fire"></i>
            </button>
            <br>
            <button class="fluid ui icon basic green button">
                <i class="icon bolt"></i>
            </button>
        </center>
    </body>
</html>


Output: 

Semantic-UI Button Fluid Variations

Semantic-UI Button Fluid Variations

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



Last Updated : 29 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads