Semantic-UI Button Disabled States
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic-UI Button Disabled States are is one of the states from 3 states of Semantic-UI Button States. This class is used to set the button status active.
Semantic-UI Button Disabled States Class:
- disabled: This class is used to set the button status disabled.
Syntax:
<button class="ui disabled button"> ... </button>
Below example illustrate the Semantic-UI Button Disabled States:
Example:
HTML
<!DOCTYPE html><html><head> <link href= rel="stylesheet" /> <style> button { width: 150px; } .container { margin-left: 10%; } </style></head><body> <center> <h1 class="ui green"> Geeksforgeeks </h1> <strong> Semantic-UI Button Disabled States </strong> </center> <br><br> <div class="container"> <strong>Button Disabled States:</strong> <button class="ui disabled button"> <i class="like icon"></i> Like </button> <button class="ui disabled button"> <i class="share icon"></i> share </button> <button class="ui disabled button"> <i class="trash icon"></i> trash </button> </div></body></html> |
Output:
Semantic-UI Button Disabled States
Example 2:
HTML
<!DOCTYPE html><html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> <style> button { width: 150px; } .container { margin-left: 10%; } </style> </head> <body> <center> <h1 class="ui green">Geeksforgeeks</h1> <strong>Semantic-UI Button Disabled States</strong> </center> <br><br> <div class="container"> <strong>Basic Button Disabled States:</strong> <button class="ui disabled basic button"> <i class="like icon"></i> Like </button> <button class="ui disabled basic button"> <i class="share icon"></i> share </button> <button class="ui disabled basic button"> <i class="trash icon"></i> trash </button> </div> </body></html> |
Output:
Semantic-UI Button Disabled States
Reference: https://semantic-ui.com/elements/button.html#disabled
Please Login to comment...