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

$btn-padding-y:1rem;
$btn-padding-x:2rem;
$btn-font-family:Lucida;
$btn-font-size:1rem;
$btn-line-height:3;
$btn-padding-y-sm:1rem;
$btn-padding-x-sm:1.5rem;
$btn-font-size-sm:1.3rem;
$btn-padding-y-lg:1.3rem;
$btn-padding-x-lg:3rem;
$btn-font-size-lg:1.8rem;
$btn-border-width:10px;
$btn-font-weight:700;
$btn-focus-width:2rem;
$btn-disabled-opacity:0.3;
$btn-link-color:green;
$btn-link-hover-color:white;
$btn-link-disabled-color:black;
$btn-border-radius:2rem;
$btn-border-radius-sm:3rem;
$btn-border-radius-lg:4rem;
@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: 2rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-family: Lucida;
  --bs-btn-font-size: 1rem;
  --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: 2rem;
  --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 2rem 
            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.15s ease-in-out,
                background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out, 
                box-shadow 0.15s 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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet">
    <link rel="stylesheet" href="./custom.css">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </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 5s ease-in-out, 
                background-color 2s ease-in-out,                 
                border-color .15s ease-in-out, 
                box-shadow .15s 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.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --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.375rem;
  --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.25rem 
        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 5s ease-in-out, 
            background-color 2s ease-in-out, 
            border-color 0.15s ease-in-out, 
            box-shadow 0.15s 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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet">
    <link rel="stylesheet" href="./custom1.css">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
     <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </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