Bootstrap 5 Buttons SASS

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

CSS file created after conversion

custom.css: This file is used in the above HTML file.

index.html:

Output:

Example 2: In this example, make use of some of the above SASS variables of Buttons.

custom.scss

CSS file created after conversion

custom1.css: This file is used in the above HTML file

index.html:

Output:

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#sass