Semantic-UI Button Basic Type
Last Updated :
16 Feb, 2022
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 Type offers us different types of buttons like normal buttons, emphasis buttons, animated buttons. labeled button, icon, labeled icon, basic, and inverted button. In this article, we will learn about the Semantic UI Button Icon Type.
Semantic UI Button Basic Type class is used to create buttons that will have the button text and border visible. This is a cool type of button.
Semantic-UI Button Basic Type Class:
- basic: This class is used to create a basic button.
Syntax;
<button class="ui basic button">
...
</button>
Note: The most important and good thing in Semantic-UI is that we can mix up any classes and create a new UI.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<style>
.container {
margin-left: 25px;
}
</style>
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic-UI Button Basic Type</strong>
</center>
<br><br>
<div class="container">
<strong>Basic Button:</strong>
<button class="ui basic button">Basic Button</button>
<br><br>
<strong>Basic Icon Button:</strong>
<button class="ui basic icon button">
<i class="icon user"></i>
Subscribed
</button>
<br><br>
<strong>Basic Emphasis Button:</strong>
<button class="ui basic primary button">
Primary Button
</button>
<button class="ui basic secondary button">
Secondary Button
</button>
<button class="ui basic negative button">
Negative Button
</button>
<button class="ui basic positive button">
Positive Button
</button>
<br><br>
</div>
</body>
</html>
|
Output:
Semantic-UI Button Basic Type
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic-UI Button Basic Type</strong>
<br><br>
<div class="container">
<strong>Basic Colored Button:</strong><br>
<button class="ui red basic button">
Red Button
</button>
<button class="ui orange basic button">
Orange Button
</button>
<button class="ui yellow basic button">
Yellow Button
</button>
<button class="ui olive basic button">
Olive Button
</button>
<br><br>
<button class="ui green basic button">
Green Button
</button>
<button class="ui teal basic button">
Teal Button
</button>
<button class="ui blue basic button">
Blue Button
</button>
<button class="ui violet basic button">
Violet Button
</button>
<button class="ui purple basic button">
Purple Button
</button>
<button class="ui pink basic button">
Pink Button
</button>
<br><br>
<button class="ui brown basic button">
Brown Button
</button>
<button class="ui grey basic button">
Grey Button
</button>
<button class="ui black basic button">
Black Button
</button>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Button Basic Type
Reference: https://semantic-ui.com/elements/button.html#basic
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...