Semantic-UI Button Emphasis 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 emphasis type.
These buttons of emphasis type can be used to the different emphasis levels by customizing them as per requirement. In this article let us see how buttons can be used to show different emphasis levels.
Semantic-UI Button Emphasis Type Class: The color of the button can be set as per the emphasis level but there is no special class of emphasis level but the color and the title of the button can indicate the emphasis level. Basically, we used primary & secondary classes to denote the emphasis.
Syntax:
<button class="ui ... color_class ... button">
Emphasis level
</button>
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h1>
GeeksforGeeks
</h1>
<strong>
Semantic-UI Button Emphasis Type
</strong>
<div class="ui container">
<button class="ui primary button">
Save
</button>
<button class="ui secondary button">
Preview
</button>
<button class="ui button">
Discard
</button>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Button Emphasis Type
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h1>
GeeksforGeeks
</h1>
<strong>
Semantic-UI Button Emphasis Type
</strong>
<div class="ui container">
<button class="ui blue button">
Proceed
</button>
<button class="ui button">
Cancel
</button>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Button Emphasis Type
Reference: https://semantic-ui.com/elements/button.html#emphasis
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...