Spectre Button colors

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

Button Color Class:

btn-primary: This class is used to set the color of the button as blue.
btn-success: This class is used to set the color of the button as green.
btn-error: This class is used to set the color of the button as red.

Note: If you need more button colors, please use button mixins to create your own button color variants.

Example: Below example illustrate the Button Color in Spectre.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE 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 Color Class</strong>
        <br>
        <button class="btn btn-primary">Primary Color</button>
        <button class="btn btn-success">Success Color</button>
        <button class="btn btn-error">Error Color</button>
    </center>
</body>

</html>

Output:

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

Explore