Spectre Button States

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

Button States Class:

active: This class is used to show that the button is active which is the default.
disabled: This class is used to show that the button is disabled.
loading: This class is used to show that the button is loading.

Example: The below example illustrate the Button States in Spectre.

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 States Class</strong>
        <br>
        <button class="btn btn-primary active">
          Active Button
        </button>
        <button class="btn btn-success disabled">
          Disable Button
        </button>
        <button class="btn btn-error loading">
          Loading Button
        </button>
    </center>
</body>

</html>

Output:

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

Explore