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 the “btn-action” class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).
- btn-action: This class is used to set the button shape into a square.
- s-circle: This class is used to set the button shape into a circle.
The below example illustrates the Button Size in Spectre.
Example 1: In this example, we will define the size of the button.
HTML
<!DOCTYPE html> <html>
<head>
<title>SPECTRE CSS Buttons Class</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>SPECTRE Button Size Class</strong>
<br>
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-success">Default Button</button>
<button class="btn btn-error btn-sm">Small Button</button>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will define the shape of the button.
HTML
<!DOCTYPE html> <html>
<head>
<title>SPECTRE CSS Buttons Class</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>SPECTRE Button Size Class</strong>
<br>
<button class="btn btn-primary btn-action">
<i class="icon icon-arrow-left"></i>
</button>
<button class="btn btn-success">
Default Button
</button>
<button class="btn btn-error btn-action">
<i class="icon icon-arrow-right"></i>
</button>
<br><br>
<button class="btn btn-primary s-circle">
<i class="icon icon-arrow-left"></i>
</button>
<button class="btn btn-success">
Default Button
</button>
<button class="btn btn-error s-circle">
<i class="icon icon-arrow-right"></i>
</button>
</center>
</body>
</html>
|
Output:
Reference: https://picturepan2.github.io/spectre/elements/buttons.html#buttons-sizes