బటన్లు

బహుళ పరిమాణాలు, రాష్ట్రాలు మరియు మరిన్నింటికి మద్దతుతో ఫారమ్‌లు, డైలాగ్‌లు మరియు మరిన్నింటిలో చర్యల కోసం బూట్‌స్ట్రాప్ అనుకూల బటన్ శైలులను ఉపయోగించండి.

ఈ పేజీలో

ఉదాహరణలు

బూట్‌స్ట్రాప్ అనేక ముందే నిర్వచించబడిన బటన్ స్టైల్‌లను కలిగి ఉంటుంది, ప్రతి ఒక్కటి దాని స్వంత సెమాంటిక్ ప్రయోజనాన్ని అందిస్తాయి, మరింత నియంత్రణ కోసం కొన్ని అదనపు అంశాలు అందించబడతాయి.

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బటన్‌కు తరగతిని జోడించవచ్చు. Sassలో, మీరు $btn-white-space: nowrapప్రతి బటన్‌కి టెక్స్ట్ ర్యాపింగ్‌ని డిసేబుల్ చేయడానికి సెట్ చేయవచ్చు.

బటన్ ట్యాగ్‌లు

తరగతులు మూలకంతో .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>

క్షితిజ సమాంతరంగా ఉన్నప్పుడు బటన్ల అమరికను సర్దుబాటు చేయడానికి అదనపు యుటిలిటీలను ఉపయోగించవచ్చు. ఇక్కడ మేము మా మునుపటి ప్రతిస్పందించే ఉదాహరణను తీసుకున్నాము మరియు బటన్‌లు పేర్చబడనప్పుడు వాటిని కుడివైపుకి సమలేఖనం చేయడానికి బటన్‌పై కొన్ని ఫ్లెక్స్ యుటిలిటీలు మరియు మార్జిన్ యుటిలిటీని జోడించాము.

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>

బటన్ ప్లగ్ఇన్

బటన్ ప్లగ్ఇన్ సాధారణ ఆన్/ఆఫ్ టోగుల్ బటన్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది.

దృశ్యమానంగా, ఈ టోగుల్ బటన్‌లు చెక్‌బాక్స్ టోగుల్ బటన్‌లకు సమానంగా ఉంటాయి . అయినప్పటికీ, అవి సహాయక సాంకేతికతల ద్వారా విభిన్నంగా తెలియజేయబడతాయి: చెక్‌బాక్స్ టోగుల్‌లు స్క్రీన్ రీడర్‌ల ద్వారా “చెక్ చేయబడినవి”/“చెక్ చేయబడలేదు” అని ప్రకటించబడతాయి (ఎందుకంటే, అవి కనిపించినప్పటికీ, అవి ప్రాథమికంగా ఇప్పటికీ చెక్‌బాక్స్‌లు), అయితే ఈ టోగుల్ బటన్‌లు ఇలా ప్రకటించబడతాయి "బటన్"/"బటన్ నొక్కినది". ఈ రెండు విధానాల మధ్య ఎంపిక మీరు సృష్టిస్తున్న టోగుల్ రకాన్ని బట్టి ఉంటుంది మరియు చెక్‌బాక్స్‌గా లేదా అసలు బటన్‌గా ప్రకటించినప్పుడు టోగుల్ వినియోగదారులకు అర్థవంతంగా ఉంటుందా లేదా అనే దానిపై ఆధారపడి ఉంటుంది.

రాష్ట్రాలను టోగుల్ చేయండి

data-bs-toggle="button"బటన్ activeస్థితిని టోగుల్ చేయడానికి జోడించండి . మీరు బటన్‌ను ముందుగా టోగుల్ చేస్తుంటే, మీరు తప్పనిసరిగా .activeక్లాస్‌ని మాన్యువల్‌గా జోడించాలి మరియు aria-pressed="true" అది సహాయక సాంకేతికతలకు తగిన విధంగా తెలియజేయబడిందని నిర్ధారించుకోవాలి.

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>

లింక్‌ని టోగుల్ చేయండి సక్రియ టోగుల్ లింక్ టోగుల్ లింక్ నిలిపివేయబడింది

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>

పద్ధతులు

మీరు బటన్ కన్స్ట్రక్టర్‌తో బటన్ ఉదాహరణను సృష్టించవచ్చు, ఉదాహరణకు:

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()
})

CSS

వేరియబుల్స్

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