Open In App

Semantic-UI Button Variations Negative Variant

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 negative variation of buttons. A negative button color will be red always. The negative button provides a hint towards a negative consequence.

Semantic UI Button Negative Variations Class:

  • negative: This class is used to create a negative button.

Syntax:

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

Example: Below example illustrate the negative variation of the Semantic UI button.

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


Output:

Semantic-UI Button Negative Variations

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



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