ബട്ടണുകൾ

ഫോമുകൾ, ഡയലോഗുകൾ എന്നിവയിലെ പ്രവർത്തനങ്ങൾക്കായി ബൂട്ട്സ്ട്രാപ്പിന്റെ ഇഷ്‌ടാനുസൃത ബട്ടൺ ശൈലികൾ ഉപയോഗിക്കുക.

ഈ പേജിൽ

ഉദാഹരണങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ നിരവധി മുൻനിശ്ചയിച്ച ബട്ടൺ ശൈലികൾ ഉൾപ്പെടുന്നു, ഓരോന്നിനും അതിന്റേതായ സെമാന്റിക് ഉദ്ദേശം നൽകുന്നു, കൂടുതൽ നിയന്ത്രണത്തിനായി കുറച്ച് എക്സ്ട്രാകൾ ഇടുന്നു.

html

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു

അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (ഉദാ: ദൃശ്യമായ ടെക്‌സ്‌റ്റ്), അല്ലെങ്കിൽ .visually-hiddenക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.

ടെക്സ്റ്റ് റാപ്പിംഗ് പ്രവർത്തനരഹിതമാക്കുക

ബട്ടൺ ടെക്‌സ്‌റ്റ് പൊതിയാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നില്ലെങ്കിൽ, ബട്ടണിലേക്ക് .text-nowrapക്ലാസ് ചേർക്കാം. $btn-white-space: nowrapSass-ൽ, ഓരോ ബട്ടണിനും ടെക്സ്റ്റ് റാപ്പിംഗ് പ്രവർത്തനരഹിതമാക്കാൻ നിങ്ങൾക്ക് സജ്ജീകരിക്കാം .

ബട്ടൺ ടാഗുകൾ

എലമെന്റിനൊപ്പം ഉപയോഗിക്കാനാണ് .btnക്ലാസുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് . <button>എന്നിരുന്നാലും, നിങ്ങൾക്ക് ഈ ക്ലാസുകളിലോ ഘടകങ്ങളിലോ ഉപയോഗിക്കാം <a>( <input>ചില ബ്രൗസറുകൾ അല്പം വ്യത്യസ്തമായ റെൻഡറിംഗ് ബാധകമാക്കിയേക്കാം).

<a>നിലവിലെ പേജിലെ പുതിയ പേജുകളിലേക്കോ വിഭാഗങ്ങളിലേക്കോ ലിങ്ക് ചെയ്യുന്നതിനുപകരം, പേജിലെ പ്രവർത്തനക്ഷമത (ഉള്ളടക്കം തകരുന്നത് പോലെ) പ്രവർത്തനക്ഷമമാക്കാൻ ഉപയോഗിക്കുന്ന ഘടകങ്ങളിൽ ബട്ടൺ ക്ലാസുകൾ ഉപയോഗിക്കുമ്പോൾ, ഈ ലിങ്കുകൾക്ക് role="button"അവയുടെ ഉദ്ദേശം ഉചിതമായി നൽകണം. സ്ക്രീൻ റീഡറുകൾ.

ലിങ്ക്

html

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ഔട്ട്‌ലൈൻ ബട്ടണുകൾ

ഒരു ബട്ടൺ ആവശ്യമാണെങ്കിലും അവർ കൊണ്ടുവരുന്ന കനത്ത പശ്ചാത്തല വർണ്ണങ്ങളല്ലേ? .btn-outline-*ഏതെങ്കിലും ബട്ടണിലെ എല്ലാ പശ്ചാത്തല ചിത്രങ്ങളും വർണ്ണങ്ങളും നീക്കം ചെയ്യാൻ ഡിഫോൾട്ട് മോഡിഫയർ ക്ലാസുകൾ മാറ്റിസ്ഥാപിക്കുക .

html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ചില ബട്ടൺ ശൈലികൾ താരതമ്യേന നേരിയ മുൻവശത്ത് നിറം ഉപയോഗിക്കുന്നു, മതിയായ കോൺട്രാസ്റ്റ് ലഭിക്കുന്നതിന് ഇരുണ്ട പശ്ചാത്തലത്തിൽ മാത്രമേ ഉപയോഗിക്കാവൂ.

വലിപ്പങ്ങൾ

വലുതോ ചെറുതോ ആയ ബട്ടണുകൾ ഇഷ്ടമാണോ? അധിക വലുപ്പങ്ങൾ ചേർക്കുക .btn-lgഅല്ലെങ്കിൽ ചേർക്കുക..btn-sm

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിങ്ങളുടെ സ്വന്തം ഇഷ്‌ടാനുസൃത വലുപ്പം റോൾ ചെയ്യാനും കഴിയും:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

വികലാംഗ സംസ്ഥാനം

disabledഏതെങ്കിലും <button>ഘടകത്തിലേക്ക് ബൂളിയൻ ആട്രിബ്യൂട്ട് ചേർത്ത് ബട്ടണുകൾ നിഷ്ക്രിയമാക്കുക . പ്രവർത്തനരഹിതമാക്കിയ ബട്ടണുകൾ pointer-events: noneപ്രയോഗിച്ചു, ഹോവർ, സജീവ നിലകൾ എന്നിവ ട്രിഗർ ചെയ്യുന്നതിൽ നിന്ന് തടയുന്നു.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

ഘടകം ഉപയോഗിക്കുന്ന പ്രവർത്തനരഹിതമാക്കിയ ബട്ടണുകൾ <a>കുറച്ച് വ്യത്യസ്തമായി പ്രവർത്തിക്കുന്നു:

<a>ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്‌ക്കുന്നില്ല , അതിനാൽ അത് ദൃശ്യപരമായി പ്രവർത്തനരഹിതമാക്കുന്നതിന് നിങ്ങൾ ക്ലാസ് disabledചേർക്കണം ..disabled
pointer-eventsആങ്കർ ബട്ടണുകളിൽ എല്ലാം പ്രവർത്തനരഹിതമാക്കാൻ ചില ഭാവി സൗഹൃദ ശൈലികൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട് .
ഉപയോഗിക്കുന്ന പ്രവർത്തനരഹിതമാക്കിയ ബട്ടണുകളിൽ സഹായ സാങ്കേതിക വിദ്യകളിലേക്കുള്ള മൂലകത്തിന്റെ അവസ്ഥ സൂചിപ്പിക്കാൻ ആട്രിബ്യൂട്ട് <a>ഉൾപ്പെടുത്തണം .aria-disabled="true"
<a> ഉപയോഗിക്കുന്ന പ്രവർത്തനരഹിതമാക്കിയ ബട്ടണുകളിൽ hrefആട്രിബ്യൂട്ട് ഉൾപ്പെടുത്തരുത് .

പ്രാഥമിക ലിങ്ക് ലിങ്ക്

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

ലിങ്ക് പ്രവർത്തനക്ഷമത മുന്നറിയിപ്പ്

hrefഒരു ഡിസേബിൾഡ് ലിങ്കിൽ ആട്രിബ്യൂട്ട് സൂക്ഷിക്കേണ്ട കേസുകൾ കവർ ചെയ്യുന്നതിന് , s-ന്റെ ലിങ്ക് പ്രവർത്തനം പ്രവർത്തനരഹിതമാക്കാൻ .disabledക്ലാസ് ഉപയോഗിക്കുന്നു . ഈ CSS പ്രോപ്പർട്ടി ഇതുവരെ HTML-നായി സ്റ്റാൻഡേർഡ് ചെയ്തിട്ടില്ല, എന്നാൽ എല്ലാ ആധുനിക ബ്രൗസറുകളും ഇതിനെ പിന്തുണയ്ക്കുന്നു. കൂടാതെ, പിന്തുണയ്‌ക്കുന്ന ബ്രൗസറുകളിൽ പോലും , കീബോർഡ് നാവിഗേഷൻ ബാധിക്കപ്പെടാതെ തുടരുന്നു, അതായത് കാഴ്ചയുള്ള കീബോർഡ് ഉപയോക്താക്കൾക്കും സഹായ സാങ്കേതിക വിദ്യകളുടെ ഉപയോക്താക്കൾക്കും തുടർന്നും ഈ ലിങ്കുകൾ സജീവമാക്കാനാകും. സുരക്ഷിതമായിരിക്കാൻ, കൂടാതെ , ഈ ലിങ്കുകളിൽ കീബോർഡ് ഫോക്കസ് സ്വീകരിക്കുന്നതിൽ നിന്ന് തടയുന്നതിന് ഒരു ആട്രിബ്യൂട്ടും ഉൾപ്പെടുത്തുക, കൂടാതെ അവയുടെ പ്രവർത്തനം പൂർണ്ണമായും പ്രവർത്തനരഹിതമാക്കാൻ ഇഷ്‌ടാനുസൃത JavaScript ഉപയോഗിക്കുക.pointer-events: none<a>pointer-events: nonearia-disabled="true"tabindex="-1"

പ്രാഥമിക ലിങ്ക് ലിങ്ക്

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ബട്ടണുകൾ തടയുക

ഞങ്ങളുടെ ഡിസ്‌പ്ലേ, ഗ്യാപ്പ് യൂട്ടിലിറ്റികൾ എന്നിവയുടെ മിശ്രിതം ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ൽ ഉള്ളത് പോലെ പൂർണ്ണ വീതിയുള്ള "ബ്ലോക്ക് ബട്ടണുകളുടെ" റെസ്‌പോൺസീവ് സ്റ്റാക്കുകൾ സൃഷ്‌ടിക്കുക. ബട്ടൺ നിർദ്ദിഷ്‌ട ക്ലാസുകൾക്ക് പകരം യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുന്നതിലൂടെ, സ്‌പെയ്‌സിംഗ്, വിന്യാസം, പ്രതികരണ സ്വഭാവങ്ങൾ എന്നിവയിൽ ഞങ്ങൾക്ക് കൂടുതൽ നിയന്ത്രണമുണ്ട്.

html

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

mdഇവിടെ ഞങ്ങൾ ഒരു റെസ്‌പോൺസീവ് വേരിയേഷൻ സൃഷ്‌ടിക്കുന്നു, ബ്രേക്ക്‌പോയിന്റ് വരെ ലംബമായി അടുക്കിയിരിക്കുന്ന ബട്ടണുകളിൽ നിന്ന് ആരംഭിക്കുന്നു , അവിടെ ക്ലാസ് .d-md-blockമാറ്റിസ്ഥാപിക്കുന്നു .d-grid, അങ്ങനെ gap-2യൂട്ടിലിറ്റി അസാധുവാകുന്നു. അവ മാറുന്നത് കാണുന്നതിന് നിങ്ങളുടെ ബ്രൗസറിന്റെ വലുപ്പം മാറ്റുക.

html

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ഗ്രിഡ് കോളം വീതി ക്ലാസുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ബ്ലോക്ക് ബട്ടണുകളുടെ വീതി ക്രമീകരിക്കാം. ഉദാഹരണത്തിന്, പകുതി വീതിയുള്ള "ബ്ലോക്ക് ബട്ടണിന്", ഉപയോഗിക്കുക .col-6. ഇതും ഉപയോഗിച്ച് തിരശ്ചീനമായി കേന്ദ്രീകരിക്കുക .mx-auto.

html

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.

html

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Button plugin

The button plugin allows you to create simple on/off toggle buttons.

Visually, these toggle buttons are identical to the checkbox toggle buttons. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Toggle link Active toggle link Disabled toggle link

html

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Methods

You can create a button instance with the button constructor, for example:

const bsButton = new bootstrap.Button('#myButton')

Method	Description
`dispose`	Destroys an element’s button. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a button instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggles push state. Gives the button the appearance that it has been activated.

For example, to toggle all buttons

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Variables

Added in v5.2.0

As part of Bootstrap’s evolving CSS variables approach, buttons now use local CSS variables on .btn for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Each .btn-* modifier class updates the appropriate CSS variables to minimize additional CSS rules with our button-variant(), button-outline-variant(), and button-size() mixins.

Here’s an example of building a custom .btn-* modifier class like we do for the buttons unique to our docs by reassigning Bootstrap’s CSS variables with a mixture of our own CSS and Sass variables.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Sass variables

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Sass mixins

ബട്ടണുകൾക്കായി മൂന്ന് മിക്‌സിനുകൾ ഉണ്ട്: ബട്ടണും ബട്ടണും ഔട്ട്‌ലൈൻ വേരിയന്റ് മിക്സിനുകളും (രണ്ടും അടിസ്ഥാനമാക്കിയുള്ളത് $theme-colors), കൂടാതെ ഒരു ബട്ടൺ സൈസ് മിക്‌സിനും.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

സാസ് ലൂപ്പുകൾ

$theme-colorsഎന്നതിലെ മോഡിഫയർ ക്ലാസുകൾ ജനറേറ്റുചെയ്യുന്നതിന് ബട്ടൺ വകഭേദങ്ങൾ (റെഗുലർ, ഔട്ട്‌ലൈൻ ബട്ടണുകൾക്ക്) ഞങ്ങളുടെ മാപ്പിനൊപ്പം അവയുടെ മിക്‌സിനുകൾ ഉപയോഗിക്കുന്നു scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}