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 Content offers conditions between buttons like delete or Save, Cancel or Agree and Yes or No. For that we will need to use a div element between two buttons that contain a “or” class and one of the button should contain a positive class. This type of buttons are always in a group so knowledge about the Semantic-UI Button Group is required.
Semantic UI Button Content Class:
- or: This class is use to create condition between two buttons.
- positive: This class is use to create the button in positive mode(green color).
Syntax:
<div class="ui buttons"> <button class="ui button">...</button> <div class="or"></div> <button class="ui button">...</button> </div>
Below example will illustrate the Semantic-UI Button Content:
Example:
HTML
<!DOCTYPE html><html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<style>
button {
width: 150px;
}
.container {
width: 600px;
margin-left: 20%;
}
</style>
</head>
<body>
<center>
<h1 class="ui green">Geeksforgeeks</h1>
<strong>Semantic UI Button Content</strong>
</center>
<br><br>
<div class="container">
<strong>Conditionals:</strong>
<div class="ui buttons">
<div class="ui buttons">
<button class="ui button">Yes</button>
<div class="or"></div>
<button class="ui positive button">No</button>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Button Content