Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Spectre Button Group

  • Last Updated : 15 Dec, 2021

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">
                 Erorr 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">
                 Erorr 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">
                 Erorr Button
            </button>
        </div>
          
    </center>
</body>
  
</html>

Output: 

Spectre Button Group Class

Reference: https://picturepan2.github.io/spectre/elements/buttons.html#buttons-groups


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!