Open In App

Semantic-UI Button Positive 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. 

Semantic-UI Button Positive Variation Class:

  • positive: This class is used to create a positive button, the positive button color will be green.

Syntax:

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

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

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

Semantic-UI Button Positive Variations

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



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