Semantic-UI Button Inverted Type

Last Updated : 12 Feb, 2022

Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. In this article let us see the buttons of class inverted type.

Semantic-UI provides various classes with buttons to customize, In this article, we will see the buttons of inverted type. The inverted class helps the button to appear in dark backgrounds. The inverted class should be mentioned when we want to use buttons of inverted type:

Semantic UI Button Inverted Type Class:

inverted: This class should be used to use the inverted type button.

Note: To use the button of inverted type the class inverted segment should be mentioned in the div.

Syntax:

<div class = "ui inverted segment">
<button class="ui inverted button"> .... </button>
</div>

Example 1: here we will create some inverted type buttons.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
    rel="stylesheet" /> 
</head> 
<center> 
    <body> 
        <div class="ui container"> 
            <h1 style="color:green">GeeksforGeeks</h1> 
            <strong>Semantic-UI Inverted Type Button</strong> 
  
            <div class="ui inverted segment"> 
                <button class="ui inverted button">Like</button> 
                <button class="ui inverted button">Share</button> 
                <button class="ui inverted button">Subscribe</button> 
                <button class="ui inverted button">Report</button> 
            </div> 
        </div> 
    </body> 
</center> 
</html>

Output:

Semantic-UI Button Inverted Type

Example 2: In this example, you will see the inverted type basic button is used with the different color variants.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
    rel="stylesheet" /> 
</head> 
<body> 
    <center> 
    <div class="ui container"> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <strong>Semantic-UI Inverted Type Button</strong> 
        <br><br> 
        <strong>Inverted Basic Colored Buttons:</strong> 
        <div class="ui inverted segment"> 
            <button class="ui inverted red basic button"> 
                Basic Red 
            </button> 
            <button class="ui inverted orange basic button"> 
                Basic Orange 
            </button> 
            <button class="ui inverted yellow basic button"> 
                Basic Yellow 
            </button> 
            <button class="ui inverted olive basic button"> 
                Basic Olive 
            </button> 
            <button class="ui inverted green basic button"> 
                Basic Green 
            </button> 
        </div> 
    </div> 
    </center> 
</body> 
</html>