Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI Button offers several types of micro button components like Types, Groups, Content, States, Variations, and Group Variations.
The different button variations are Social, Different Size, Floated, Colored, Compact, Toggle, Positive, Negative, Fluid, Circular, Vertically and Horizontally attached buttons.
In this article, we will learn about the fluid variation of buttons. A fluid button can take the width of its container
Semantic UI Button Fluid Variations Fluid Class:
- fluid: This class is used to create a button that will take the full width of its container.
Syntax:
<button class="fluid ui button"> ... </button>
Example: In this example, we will create fluid buttons and basic fluid icon buttons.
<!DOCTYPE html> <html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Button Fluid Variation</strong>
<br><br>
<strong>Fluid Button:</strong>
<button class="fluid ui blue button">
Go to Cart
</button>
<br>
<button class="fluid ui green button">
Place Order
</button>
<br><br>
<strong>Fluid Icon Button:</strong>
<button class="fluid ui icon basic blue button">
<i class="icon fire"></i>
</button>
<br>
<button class="fluid ui icon basic green button">
<i class="icon bolt"></i>
</button>
</center>
</body>
</html>
|
Output:
Semantic-UI Button Fluid Variations
Reference: https://semantic-ui.com/elements/button.html#fluid