Bootstrap 5 Buttons SASS can be used to change the default values provided for the buttons by customizing scss file of bootstrap 5.
SASS variables of Buttons:
- $btn-padding-y: This variable provides the top and bottom padding of the button. By default, it is 0.375rem.
- $btn-padding-x: This variable provides the left and right padding of the button. By default, it is 0.75rem.
- $btn-font-family: This variable provides the font family of the button. By default, it is null.
- $btn-line-height: This variable provides the line height of the button. By default, it is 1.5.
- $btn-white-space: This variable provides the white space of the button. By default, it is null denoting not wrapping text.
- $btn-padding-y-sm: This variable provides the top and bottom padding of the button in small size. By default, it is 0.25rem.
- $btn-padding-x-sm: This variable provides the left and right padding of the button in small size. By default, it is 0.5rem.
- $btn-font-size-sm: This variable provides the font size of the button in small size. By default, it is 0.875rem.
- $btn-padding-y-lg: This variable provides the top and bottom padding of the button in large size. By default, it is 0.5rem.
- $btn-padding-x-lg: This variable provides the left and right padding of the button in large size. By default, it is 1rem.
- $btn-font-size-lg: This variable provides the font size of the button in large size. By default, it is 1.25rem.
- $btn-border-width: This variable provides the border width of the button. By default, it is 1px.
- $btn-font-weight: This variable provides the font weight of the button. By default, it is 400.
- $btn-box-shadow: This variable provides the box shadow of the button. By default, it is a white color with 1px and black color with 1px.
- $btn-focus-width: This variable provides the focus width of the button. By default, it is 0.25rem.
- $btn-focus-box-shadow: This variable provides the box shadow of the button on focus. By default, it is 0.
- $btn-disabled-opacity: This variable provides the opacity of a disabled button. By default, it is 0.65.
- $btn-active-box-shadow: This variable provides the box shadow of an active button. By default, it is black in color with a left and right distance of 3px, and a bottom distance of 5px.
- $btn-link-color: This variable provides the text color of the link button. By default, it is in blue color.
- $btn-link-hover-color: This variable provides the text color of the link button on hover. By default, it is white in color.
- $btn-link-disabled-color: This variable provides the text color of the link button which is disabled. By default, it is a gray color.
- $btn-border-radius: This variable provides the border radius of the button. By default, it is 0.375rem.
- $btn-border-radius-sm: This variable provides the border radius of the button which is small in size. By default, it is 0.25rem.
- $btn-border-radius-lg: This variable provides the border radius of the button which is large in size. By default, it is 0.5rem.
- $btn-transition: This variable provides the transition effects of the button. By default, the color, background color, border color, and box shadow of the button are set with a transition duration of 0.15 seconds with the transition timing function as ‘ease-in-out’.
- $btn-hover-bg-shade-amount: This variable provides the shaded amount of the button background color on hover. By default, it is 15%.
- $btn-hover-bg-tint-amount: This variable provides the tint amount of the background color of the button on hover. By default, it is 15%.
- $btn-hover-border-shade-amount: This variable provides the shaded amount on the border of the button on hover. By default, it is 20%.
- $btn-hover-border-tint-amount: This variable provides the tint amount on the border of the button on hover. By default, it is 10%.
- $btn-active-bg-shade-amount: This variable provides the shaded amount on the background of the active button on hover. By default, it is 20%.
- $btn-active-bg-tint-amount: This variable provides the tint amount on the background of the active button. By default, it is 20%.
- $btn-active-border-shade-amount: This variable provides the shaded amount on the border of the active button. By default, it is 25%.
- $btn-active-border-tint-amount: This variable provides the tint amount on the border of the active button. By default, it is 10%.
Steps to override scss of Bootstrap:
Step 1: Install bootstrap using the following command:
npm i bootstrap
Step 2: Create your custom scss file and write the variable you want to override. Then include the bootstrap scss file using import.
$class_to_override: values; @import "node_modules/bootstrap/scss/bootstrap"
Step 3: Convert the file to CSS using a live server extension.
Step 4: Include the converted scss file to your HTML after the link tag of Bootstrap CSS,
Project Structure: The custom scss file name is “custom.scss” and custom.css is a converted file
Syntax:
$variable:value; @import "./node_modules/bootstrap/scss/bootstrap"
Example 1: In this example, make use of some of the above SASS variables of Buttons.
custom.scss
$btn-padding-y: 1 rem;
$btn-padding-x: 2 rem;
$btn- font-family :Lucida;
$btn- font-size : 1 rem;
$btn- line-height : 3 ;
$btn-padding-y-sm: 1 rem;
$btn-padding-x-sm: 1.5 rem;
$btn-font-size-sm: 1.3 rem;
$btn-padding-y-lg: 1.3 rem;
$btn-padding-x-lg: 3 rem;
$btn-font-size-lg: 1.8 rem;
$btn- border-width : 10px ;
$btn- font-weight : 700 ;
$btn-focus- width : 2 rem;
$btn-disabled-opacity: 0.3 ;
$btn-link- color : green ;
$btn-link-hover- color : white ;
$btn-link-disabled- color : black ;
$btn-border-radius: 2 rem;
$btn-border-radius-sm: 3 rem;
$btn-border-radius-lg: 4 rem;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css: This file is used in the above HTML file.
.btn { --bs-btn-padding-x: 2 rem;
--bs-btn-padding-y: 1 rem;
--bs-btn- font-family : Lucida;
--bs-btn- font-size : 1 rem;
--bs-btn- font-weight : 700 ;
--bs-btn- line-height : 3 ;
--bs-btn- color : #212529 ;
--bs-btn-bg: transparent ;
--bs-btn- border-width : 10px ;
--bs-btn- border-color : transparent ;
--bs-btn-border-radius: 2 rem;
--bs-btn-hover- border-color : transparent ;
--bs-btn-box-shadow: inset 0 1px 0 rgba( 255 , 255 , 255 , 0.15 ),
0 1px 1px rgba( 0 , 0 , 0 , 0.075 );
--bs-btn-disabled-opacity: 0.3 ;
--bs-btn-focus-box-shadow: 0 0 0 2 rem
rgba(var(--bs-btn-focus-shadow- rgb ), . 5 );
display : inline- block ;
padding : var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family : var(--bs-btn-font-family);
font-size : var(--bs-btn-font-size);
font-weight : var(--bs-btn-font-weight);
line-height : var(--bs-btn-line-height);
color : var(--bs-btn-color);
text-align : center ;
text-decoration : none ;
vertical-align : middle ;
cursor : pointer ;
-webkit-user-select: none ;
-moz-user-select: none ;
-ms-user-select: none ;
user-select: none ;
border : var(--bs-btn-border-width)
solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color : var(--bs-btn-bg);
transition: color 0.15 s ease-in-out,
background-color 0.15 s ease-in-out,
border-color 0.15 s ease-in-out,
box-shadow 0.15 s ease-in-out;
} |
index.html:
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Bootstrap 5 Buttons SASS</ title >
< link href =
rel = "stylesheet" >
< link rel = "stylesheet" href = "./custom.css" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body class = "text-center" >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< div class = "container pt-3" >
< button type = "button" class = "btn btn-success" >
Normal Button
</ button >
< button type = "button" class = "btn btn-success btn-sm" >
Small button
</ button >
< button type = "button" class = "btn btn-success btn-lg" >
Large button
</ button >
</ div >
</ div >
< div class = "container pt-4" >
< button type = "button" class = "btn btn-outline-success" >
Outline
</ button >
< button type = "button" class = "btn btn-success" disabled>
Disabled button
</ button >
< button type = "button" class = "btn btn-success active" active>
Active
</ button >
< button type = "button" class = "btn btn-success btn-link" >
Link
</ button >
< button type = "button" class = "btn btn-success btn-link" disabled>
Disabled link
</ button >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, make use of some of the above SASS variables of Buttons.
custom.scss
$btn-transition:color 5 s ease-in-out,
background-color 2 s ease-in-out,
border-color . 15 s ease-in-out,
box-shadow . 15 s ease-in-out;
$btn- border-width : 10px ;
$btn-hover-bg-shade-amount: 80% ;
$btn-hover-bg-tint-amount: 50% ;
$btn-hover-border-shade-amount: 70% ;
$btn-active-bg-shade-amount: 70% ;
$btn-active-bg-tint-amount: 80% ;
$btn-active-border-shade-amount: 80% ;
$btn-active-border-tint-amount: 90% ;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom1.css: This file is used in the above HTML file
.btn { --bs-btn-padding-x: 0.75 rem;
--bs-btn-padding-y: 0.375 rem;
--bs-btn- font-family : ;
--bs-btn- font-size : 1 rem;
--bs-btn- font-weight : 400 ;
--bs-btn- line-height : 1.5 ;
--bs-btn- color : #212529 ;
--bs-btn-bg: transparent ;
--bs-btn- border-width : 10px ;
--bs-btn- border-color : transparent ;
--bs-btn-border-radius: 0.375 rem;
--bs-btn-hover- border-color : transparent ;
--bs-btn-box-shadow: inset 0 1px 0 rgba( 255 , 255 , 255 , 0.15 ),
0 1px 1px rgba( 0 , 0 , 0 , 0.075 );
--bs-btn-disabled-opacity: 0.65 ;
--bs-btn-focus-box-shadow: 0 0 0 0.25 rem
rgba(var(--bs-btn-focus-shadow- rgb ), . 5 );
display : inline- block ;
padding : var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family : var(--bs-btn-font-family);
font-size : var(--bs-btn-font-size);
font-weight : var(--bs-btn-font-weight);
line-height : var(--bs-btn-line-height);
color : var(--bs-btn-color);
text-align : center ;
text-decoration : none ;
vertical-align : middle ;
cursor : pointer ;
-webkit-user-select: none ;
-moz-user-select: none ;
-ms-user-select: none ;
user-select: none ;
border : var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color : var(--bs-btn-bg);
transition: color 5 s ease-in-out,
background-color 2 s ease-in-out,
border-color 0.15 s ease-in-out,
box-shadow 0.15 s ease-in-out;
} |
index.html:
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Bootstrap 5 Buttons SASS</ title >
< link href =
rel = "stylesheet" >
< link rel = "stylesheet" href = "./custom1.css" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body class = "text-center" >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< div class = "container pt-3" >
< button type = "button" class = "btn btn-success" >
Normal Button
</ button >
< button type = "button" class = "btn btn-success btn-sm" >
Small button
</ button >
< button type = "button" class = "btn btn-success btn-lg" >
Large button
</ button >
</ div >
</ div >
< div class = "container pt-4" >
< button type = "button" class = "btn btn-outline-success" >
Outline
</ button >
< button type = "button" class = "btn btn-success" disabled>
Disabled button
</ button >
< button type = "button" class = "btn btn-success active" active>
Active
</ button >
< button type = "button" class = "btn btn-success btn-link" >
Link
</ button >
< button type = "button" class = "btn btn-success btn-link" disabled>
Disabled link
</ button >
</ div >
< div class = "container pt-3" >
< button type = "button" class = "btn btn-outline-success" >
Outline Button
</ button >
< button type = "button" class = "btn btn-outline-success btn-sm" >
Small
</ button >
< button type = "button" class = "btn btn-outline-success btn-lg" >
Large
</ button >
< button type = "button" class = "btn btn-outline-success" active>
Active
</ button >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/buttons/#sass