Spectre Button

Last Updated : 12 Apr, 2022

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/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 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:

Spectre Button

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/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 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>