Horje
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/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css/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


 


Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
WordPress Backup &amp; Restore WordPress Backup &amp; Restore
How to Update WordPress Version Manually or Automatically How to Update WordPress Version Manually or Automatically
WordPress Media Library WordPress Media Library
How to Copy Page or Post in WordPress? How to Copy Page or Post in WordPress?
WordPress General Setting WordPress General Setting

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 8



 

Horje