Spectre Button Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The button is an important feature of any website or in any app. There are a few particular things that we all should care about buttons like color, size and etc. In spectre we have some specific classes for individual things on buttons. All the classes are mentioned and described below: Spectre Button: Spectre Button Size: The Spectre Button size class is used to define the size of the button.Spectre Button colors: The Spectre Button color class is used to define the color of the button.Spectre Button States: The Spectre Button state class is used to define the states of the button.Spectre Button Group: The Spectre Button group class is used to set the category of the button. Syntax: <button class="btn"> Button </button> Below examples illustrate the concept of the Spectre Button: Example 1: In this example, we will create different kinds of buttons like normal buttons, linked buttons, etc. HTML <!DOCTYPE html> <html> <head> <title>SPECTRE CSS Button Class</title> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Button Class</strong> <br> <button class="btn btn-link">Linked Button</button> <button class="btn btn-primary">Primary Button</button> <button class="btn">Default Button</button> </center> </body> </html> Output: Example 2: In this example, we will use other classes to design and decorate the buttons as we want. HTML <!DOCTYPE html> <html> <head> <title>SPECTRE CSS Button Class</title> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Button Class</strong> <br> <button class="btn btn-primary btn-sm">Linked Button</button> <button class="btn btn-primary">Primary Button</button> <button class="btn btn-primary s-circle btn-lg">756</button> </center> </body> </html> Output: Reference: https://picturepan2.github.io/spectre/elements/buttons.html Comment More infoAdvertise with us Next Article Spectre Button colors S skyridetim Follow Improve Article Tags : Web Technologies CSS Spectre Spectre-Element Similar Reads 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 t 2 min read Spectre Button Group In this article, we will know Spectre Button Group, its various available classes & will understand it through the examples. The Button is an important feature of any website or in any app. Sometimes you will need to categorize the buttons. The Spectre Button group class is used to set the categ 2 min read 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 d 1 min read 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 gree 1 min read Primer CSS Buttons Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Button Types Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e 3 min read Like