Skip to content
Related Articles

Related Articles

Spectre Button

View Discussion
Improve Article
Save Article
  • Last Updated : 12 Apr, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!