Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Spectre Button colors

  • Last Updated : 13 Dec, 2021

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=
    <link rel="stylesheet" 
          href=
    <link rel="stylesheet" 
          href=
</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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!