बटन के बा

कई गो आकार, राज्य आ अउरी बहुत कुछ के समर्थन के साथ फॉर्म, डायलॉग, आ अउरी बहुत कुछ में क्रिया सभ खातिर बूटस्ट्रैप के कस्टम बटन शैली सभ के इस्तेमाल करीं।

एह पन्ना पर दिहल गइल बा

उदाहरण खातिर दिहल गइल बा

बूटस्ट्रैप में कई गो पहिले से परिभाषित बटन शैली सभ के सामिल कइल गइल बा, हर एक आपन सिमेंटिक उद्देश्य के पूरा करे ला, कुछ एक्स्ट्रा सभ के अउरी नियंत्रण खातिर फेंकल जाला।

एचटीएमएल के बा

<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: nowrapहर बटन खातिर टेक्स्ट रैपिंग के अक्षम करे खातिर सेट कर सकत बानी।

बटन के टैग कइल जाला

.btnक्लास सभ के डिजाइन तत्व के साथ इस्तेमाल करे खातिर बनावल गइल बा <button>। <a>हालाँकि, आप एह क्लास सभ के या तत्व सभ पर भी इस्तेमाल क सकत बानी <input>(हालांकि कुछ ब्राउजर सभ में तनिका अलग रेंडरिंग लागू हो सके ला)।

जब अइसन तत्व सभ पर बटन क्लास <a>सभ के इस्तेमाल कइल जाला जे पन्ना में कामकाज के ट्रिगर करे खातिर इस्तेमाल होखे लें (जइसे कि संकुचित सामग्री), वर्तमान पन्ना के भीतर नया पन्ना भा खंड सभ से लिंक करे के बजाय, एह लिंक सभ के एगो दिहल जाय role="button"ताकि ऊ अपना उद्देश्य के उचित तरीका से सहायक टेक्नालॉजी सभ के पहुँचा सके जइसे कि... स्क्रीन रीडर के इस्तेमाल कइल जाला.

संपर्क

एचटीएमएल के बा

<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-*कौनों बटन पर मौजूद सगरी बैकग्राउंड इमेज आ रंग सभ के हटावल जा सके ला।

एचटीएमएल के बा

<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अतिरिक्त आकार खातिर।

एचटीएमएल के बा

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

एचटीएमएल के बा

<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 चर के साथ आपन खुद के कस्टम साइजिंग भी रोल क सकत बानी:

एचटीएमएल के बा

<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लागू हो गइल बा, होवर आ सक्रिय अवस्था सभ के ट्रिगर होखे से रोकत बा।

एचटीएमएल के बा

<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>s disabledएट्रिब्यूट के सपोर्ट ना करे ला, एह से रउआँ के क्लास के जोड़ल जरूरी बा जेह .disabledसे कि ई विजुअल रूप से अक्षम लउके।
कुछ भविष्य के अनुकूल शैली सभ pointer-eventsके एंकर बटन सभ पर सभ के अक्षम करे खातिर शामिल कइल गइल बा।
इस्तेमाल करे वाला अक्षम बटन सभ में सहायक टेक्नोलॉजी सभ के तत्व के स्थिति के बतावे खातिर बिसेसता <a>सामिल होखे के चाहीं ।aria-disabled="true"
इस्तेमाल करे वाला अक्षम बटन सभ में बिसेसता के सामिल <a> ना कइल जाय ।href

प्राथमिक कड़ी बा संपर्क

एचटीएमएल के बा

<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अइसन मामिला सभ के कवर करे खातिर जहाँ रउआँ के बिसेसता के अक्षम लिंक पर रखे के पड़े ला, .disabledक्लास s pointer-events: noneके लिंक कामकाज के अक्षम करे के कोसिस करे खातिर इस्तेमाल करे ला <a>। ध्यान दीं कि ई CSS गुण अभी HTML खातिर मानकीकृत नइखे भइल, बाकी सभ आधुनिक ब्राउजर एकरा के सपोर्ट करे लें। एकरे अलावा, ब्राउजर सभ में भी जे सपोर्ट करे लें pointer-events: none, कीबोर्ड नेविगेशन अप्रभावित रहे ला, मने कि दृष्टिवान कीबोर्ड यूजर आ सहायक टेक्नोलॉजी सभ के यूजर अबहियों एह लिंक सभ के सक्रिय क सके लें। त सुरक्षित होखे खातिर, के अलावा , एह लिंक सभ पर aria-disabled="true"एगो एट्रिब्यूट भी शामिल करीं जेह से कि इनहन के कीबोर्ड फोकस ना मिले, आ कस्टम जावास्क्रिप्ट के इस्तेमाल से इनहन के कामकाज के पूरा तरीका से अक्षम कइल जा सके।tabindex="-1"

प्राथमिक कड़ी बा संपर्क

एचटीएमएल के बा

<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 में जइसन फुल-विड्थ, “ब्लॉक बटन” के रिस्पांसिव स्टैक बनाईं। बटन विशिष्ट वर्ग के बजाय उपयोगिता के इस्तेमाल से, हमनी के स्पेसिंग, संरेखण, आ प्रतिक्रियाशील व्यवहार पर बहुत अधिका नियंत्रण बा।

एचटीएमएल के बा

<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-gridgap-2

एचटीएमएल के बा

<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, भी।

एचटीएमएल के बा

<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>

क्षैतिज होखे पर बटन सभ के संरेखण के समायोजित करे खातिर अतिरिक्त उपयोगिता सभ के इस्तेमाल कइल जा सके ला। इहाँ हमनी के आपन पिछला रिस्पांसिव उदाहरण लेले बानी जा आ बटन पर कुछ फ्लेक्स यूटिलिटी आ एगो मार्जिन यूटिलिटी जोड़ले बानी जा जवना से बटन के दाहिना ओर संरेखित कइल जा सकेला जब ऊ अब ढेर ना होखे.

एचटीएमएल के बा

<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>

बटन प्लगइन के बा

बटन प्लगइन के मदद से रउआ सरल ऑन/ऑफ टॉगल बटन बना सकेनी।

दृष्टिगत रूप से, ई टॉगल बटन चेकबॉक्स टॉगल बटन के समान होला । हालाँकि, सहायक तकनीक सभ द्वारा इनहन के अलग तरीका से संप्रेषित कइल जाला: चेकबॉक्स टॉगल सभ के स्क्रीन रीडर लोग द्वारा "चेक"/"चेक ना कइल गइल" के रूप में घोषित कइल जाई (काहें से कि, इनहन के रूप के बावजूद, ई मूल रूप से अबहिन ले चेकबॉक्स बाड़ें), जबकि ई टॉगल बटन सभ के घोषणा अइसन कइल जाई “बटन”/“बटन दबावल गइल बा”। एह दुनों तरीका सभ के बीच के चुनाव एह बात पर निर्भर करी कि रउआँ कवना प्रकार के टॉगल बनावत बानी, आ चेकबॉक्स के रूप में घोषणा कइला पर प्रयोगकर्ता लोग खातिर टॉगल के मतलब होखी कि ना या वास्तविक बटन के रूप में।

राज्यन के टॉगल कइल जाला

data-bs-toggle="button"कवनो बटन के activeस्थिति टॉगल करे खातिर जोड़ल जाला। अगर रउआँ कवनो बटन के प्री-टॉगल कर रहल बानी त रउआँ के मैन्युअल रूप से .activeक्लास जोड़ल जरूरी बा आ aria-pressed="true" ई सुनिश्चित करे के पड़ी कि ई सहायक तकनीक सभ के उचित तरीका से पहुँचावल जाय।

एचटीएमएल के बा

<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>

लिंक टॉगल कइल जाव सक्रिय टॉगल लिंक बा टॉगल लिंक के अक्षम कर दिहल गइल बा

एचटीएमएल के बा

<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>

विधियन के बारे में बतावल गइल बा

रउआँ बटन कंस्ट्रक्टर के साथ बटन इंस्टेंस बना सकत बानी, उदाहरण खातिर:

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

विधि	बिबरन
`dispose`	कवनो तत्व के बटन के नष्ट कर देला। (DOM तत्व पर संग्रहीत डेटा के हटा देला)
`getInstance`	स्थिर विधि जवन रउआ के कवनो DOM तत्व से जुड़ल बटन इंस्टेंस पावे के अनुमति देला, रउआ एकर इस्तेमाल एह तरह से कर सकेनी: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	स्थिर तरीका जवन कौनों DOM तत्व से जुड़ल बटन इंस्टेंस रिटर्न करे ला या फिर नया बनावे ला अगर ई इनिशियलाइज ना भइल होखे। रउआँ एकर इस्तेमाल एह तरह से कर सकत बानी: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	पुश स्टेट के टॉगल करेला। बटन के अइसन रूप देला कि ऊ सक्रिय हो गइल बा.

जइसे कि सभ बटन के टॉगल करे खातिर

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

सीएसएस के बा

चर के बारे में बतावल गइल बा

v5.2.0 में जोड़ल गइल बा

बूटस्ट्रैप के बिकसित होखे वाला सीएसएस चर दृष्टिकोण के हिस्सा के रूप में, बटन अब .btnबढ़ल रियल-टाइम कस्टमाइजेशन खातिर लोकल सीएसएस चर ऑन के इस्तेमाल करे लें। CSS चर सभ खातिर मान Sass के माध्यम से सेट कइल जाला, एह से Sass अनुकूलन अभी भी समर्थित बा, भी।

  --#{$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);

हर संशोधक वर्ग हमनी के , , आ मिक्सिन .btn-*के साथ अतिरिक्त CSS नियम सभ के कम से कम करे खातिर उचित CSS चर सभ के अपडेट करे ला ।button-variant()button-outline-variant()button-size()

इहाँ कस्टम मोडिफायर क्लास बनावे के एगो उदाहरण दिहल गइल बा .btn-*जइसे कि हमनी के अपना डॉक्स खातिर यूनिक बटन खातिर करेनी जा, बूटस्ट्रैप के CSS चर के अपना खुद के CSS आ Sass चर के मिश्रण के साथ फिर से असाइन क के।

.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%)};
}

ससस चर के बारे में बतावल गइल बा

$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%;

सस मिक्सिन के बा

बटन सभ खातिर तीन गो मिक्सिन बाड़ें: बटन आ बटन आउटलाइन वेरिएंट मिक्सिन (दुनों पर आधारित बाड़ें $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);
  }
}