Spectre Button Size

The button is an important feature of any website or in any app. The Spectre Button size class is used to define the size of the button.

Button Size Class:

btn-lg: This class is used to set the button size into large.
btn-sm: This class is used to set the button size into small.

Note: You could use the "btn-action" class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).

btn-action: This class is used to set the button shape into a square.
s-circle: This class is used to set the button shape into a circle.

The below example illustrates the Button Size in Spectre.

Example 1: In this example, we will define the size of the button.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css"> 
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Button Size Class</strong>
        <br>
        <button class="btn btn-primary btn-lg">Large Button</button>
        <button class="btn btn-success">Default Button</button>
        <button class="btn btn-error btn-sm">Small Button</button>
    </center>
</body>

</html>

Output:

Example 2: In this example, we will define the shape of the button.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE CSS Buttons Class</title>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css"> 
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Button Size Class</strong>
        <br>
        <button class="btn btn-primary btn-action">
          <i class="icon icon-arrow-left"></i>
        </button>
        <button class="btn btn-success">
          Default Button
        </button>
        <button class="btn btn-error btn-action">
          <i class="icon icon-arrow-right"></i>
        </button>
        <br><br>
        <button class="btn btn-primary s-circle">
          <i class="icon icon-arrow-left"></i>
        </button>
        <button class="btn btn-success">
          Default Button
        </button>
        <button class="btn btn-error s-circle">
          <i class="icon icon-arrow-right"></i>
        </button>
    </center>
</body>

</html>

Output:

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

Explore