Open In App

Spectre Button

Improve
Improve
Like Article
Like
Save
Share
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:

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

Spectre Button

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



Last Updated : 12 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads