बटन दे

कई आकारें, राज्यें, ते होर मते आस्तै समर्थन कन्नै फार्म, संवाद, ते होर मते च कार्रवाईयें आस्तै बूटस्ट्रैप दी कस्टम बटन शैलियें दा इस्तेमाल करो.

इस पेज पर

उदाहरण दे

बूटस्ट्रैप च केईं पूर्व-निर्धारित बटन शैलियां शामल न, हर इक अपने-अपने शब्दार्थ उद्देश्य दी सेवा करदा ऐ, जिस च होर नियंत्रण आस्तै किश अतिरिक्त बी फेंके गेदे न.

एचटीएमएल ऐ

<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क्लास जोड़ी सकदे ओ। Sass च, तुस $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-grid, इस चाल्ली gap-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`	इक तत्व दा बटन नष्ट करदा ऐ। (डीओएम तत्व पर संग्रहीत डेटा गी हटांदा ऐ)
`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 च जोड़ेआ गेआ

बूटस्ट्रैप दे विकसित CSS चर दृष्टिकोण दे हिस्से दे रूप च, बटन हून .btnबधाए गेदे रियल-टाइम अनुकूलन आस्तै लोकल CSS चर चालू दा उपयोग करदे न। 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);
  }
}