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
Last Updated :
13 Dec, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...