Open In App

Semantic-UI Button Positive Variations

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. 



Semantic-UI Button Positive Variation Class:

Syntax:



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

Example: Below example illustrate the Semantic UI Button Positive Variations class:




<!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 Positive Variations</strong>
            <br><br>
            <strong>Negative Button:</strong>
            <button class="positive ui button">
                Go to Cart
            </button>
            <button class="positive ui green button">
                Place Order
            </button>
            <br><br>
            <strong>Negative Icon Button:</strong>
            <button class="positive ui icon basic button">
                <i class="icon fire"></i>
            </button>
            <button class="positive ui icon basic button">
                <i class="icon bolt"></i>
            </button>
        </center>
    </body>
</html>

Output:      

Semantic-UI Button Positive Variations

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


Article Tags :