In this article, we will know Spectre Button Group, its various available classes & will understand it through the examples. The Button is an important feature of any website or in any app. Sometimes you will need to categorize the buttons. The Spectre Button group class is used to set the category of the button.
Button Group Class:
- btn-group: If you want to place the buttons as a group without any margin then you can use this class.
- btn-group-block: If you want to place the buttons as a group with any margin then you can use this class.
The below example illustrates the Button Groups in Spectre.
Example: In this example, we will see the different groups of buttons.
HTML
<!DOCTYPE html><html>
<head>
<title>SPECTRE CSS Buttons Class</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>SPECTRE Button Groups Class</strong>
<br>
<div class="btn-group">
<button class="btn btn-primary">
Primary Button
</button>
<button class="btn btn-success">
Success Button
</button>
<button class="btn btn-error">
Error Button
</button>
</div>
<br><br>
<div class="btn-group-block">
<button class="btn btn-primary">
Primary Button
</button>
<button class="btn btn-success">
Success Button
</button>
<button class="btn btn-error">
Error Button
</button>
</div>
<br><br>
<div class="btn-group btn-group-block">
<button class="btn btn-primary">
Primary Button
</button>
<button class="btn btn-success">
Success Button
</button>
<button class="btn btn-error">
Error Button
</button>
</div>
</center>
</body>
</html>
|
Output:
Spectre Button Group Class
Reference: https://picturepan2.github.io/spectre/elements/buttons.html#buttons-groups