Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

Butɔnw

Baara kɛ ni Bootstrap ka butɔni cogoyaw ye minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye, walasa ka walew kɛ sɛbɛnw kɔnɔ, kumasenw kɔnɔ, ani fɛn wɛrɛw la ni dɛmɛ ye hakɛ caman, cogoyaw ani fɛn wɛrɛw la.

Nin ɲɛ in kan

Misaliw

Bootstrap kɔnɔ, butɔni cogoya damadɔ minnu ɲɛfɔlen don ka kɔn, olu kelen-kelen bɛɛ bɛ baara kɛ n’u yɛrɛ ka kɔrɔko ye, ni farankan damadɔ ye minnu bɛ fili a kɔnɔ walasa ka kunnafoni caman sɔrɔ.

html ye 
<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>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.

Sɛbɛnniw sirili bali

N’i ​​t’a fɛ butɔni sɛbɛnni ka siri, i bɛ se ka .text-nowrapkalan fara butɔni kan. Sass kɔnɔ, i bɛ se $btn-white-space: nowrapka sɛbɛnniw sirili bali butɔni kelen-kelen bɛɛ kama.

Butɔnw ka taamasiyɛnw

Kalansow .btndabɔra ka baara kɛ ni <button>element ye. Nka, i bɛ Se fana ka baara Kɛ ni o kàlanw ye <a>walima <input>fɛn dɔw kan (hali n’a y’a Sɔrɔ navigatɔrɔ dɔw bɛ Se ka baarakɛcogo dɔ Kɛ min tɛ kelen ye dɔɔnin).

Ni baara bɛ kɛ ni butɔni kalasi ye <a>fɛnw kan minnu bɛ kɛ ka ɲɛ kɔnɔ baarakɛcogo daminɛ (i n’a fɔ kɔnɔkow bɛrɛbɛrɛ), sanni ka ɲɔgɔn cɛsiri ni ɲɛ kuraw walima yɔrɔ kuraw ye ɲɛ sisan kɔnɔ, o jɛgɛnsiraw ka kan ka di a role="button"ma walasa k’u kuntilenna lase cogo bɛnnen na dɛmɛ fɛɛrɛw ma i n’a fɔ ekran kalanbagaw.

Ka tugu
html ye 
<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">

Butɔnw labɛncogo

I mago bɛ butɔni na, nka u tɛ na ni kɔkanna kulɛri gɛlɛnw ye wa? Aw bɛ fɛn minnu bɛ fɛn caman sɛmɛntiya, olu bila u nɔ na ni .btn-outline-*minnu ye walasa ka kɔkanna jaw ni kulɛriw bɛɛ bɔ butɔni o butɔni kan.

html ye 
<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>
Butɔn cogoya dɔw bɛ baara kɛ ni ɲɛfɛla kulɛri ye min ka nɔgɔn kosɛbɛ, wa u ka kan ka baara kɛ ni kɔkanna dibiman dɔrɔn de ye walasa ka danfara bɛrɛ sɔrɔ.

Bonyaw

Fancy butɔni belebelebaw walima fitininw? Aw bɛ a fara a kan .btn-lgwalima .btn-smwalasa ka hakɛ wɛrɛw fara a kan.

html ye 
<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 ye 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Aw bɛ se yɛrɛ ka aw yɛrɛ ka ladamu sizing roll ni CSS variables ye:

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

Jamana min ye bololabaara ye

Aw bɛ butɔni kɛ i n’a fɔ baarakɛbaliw ni disabledboolean fɛnsɛbɛnni farali ye fɛn o <button>fɛn kan. Butɔnw ye pointer-events: nonebaara kɛ ni, ka hover ni active states bali ka daminɛ.

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

Butɔn minnu bɛ baara kɛ ni <a>fɛn ye, olu bɛ baara kɛ ni fɛn ye min tɛ kelen ye dɔɔnin:

  • <a>s tɛ fɛn in dɛmɛ disabled, o la i ka kan ka .disabledkalasi fara a kan walasa a ka kɛ i n’a fɔ a tɛ se ka baara kɛ.
  • Siti dɔw bɛ yen minnu bɛ se ka kɛ siniɲɛsigi ye walasa ka bɛɛ bali pointer-eventsankɔri butɔni kan.
  • Butɔn minnu bɛ baara kɛ ni bololabaarakɛlaw <a>ye, olu ka kan ka kɛ aria-disabled="true"ni fɛn ye min bɛ fɛn in cogoya jira dɛmɛni fɛɛrɛw la.
  • Butɔn minnu bɛ baara kɛ ni bali ye , olu <a> man kan kahref kɛ ni o fɛn ye.
Lien fɔlɔ Ka tugu
html ye 
<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>

Walasa ka ko minnu Dabɔ i ka kan ka fɛn in To ' hrefjyɛn-yɔrɔ-ko-yɔrɔ-ko la, .disabledkàlanso bɛ baara Kɛ pointer-events: nonek'a ɲini ka 'jyɛn-yɔrɔ-ko baarakɛcogo bali <a>s. A kɔlɔsi ko nin CSS nafolo in ma labɛn fɔlɔ HTML kama, nka bi navigatɔrɔw bɛɛ b’a dɛmɛ. Ka fara o kan, hali navigatɛriw kɔnɔ minnu bɛ dɛmɛ don pointer-events: none, klaviyeti taamacogo tɛ tiɲɛ, o kɔrɔ ye ko klaviyeti ɲɛnatɔw ni dɛmɛn fɛɛrɛw baarakɛlaw bɛna se ka o jɛgɛnsiraw baara hali bi. O la walasa ka lakana, ka fara aria-disabled="true", fana ka fɛn dɔ tabindex="-1"Dòn o jɛgɛnsiraw kan walasa k’u bali ka klaviyeti sinsinnan Sɔrɔ, ani ka JavaScript ladamulen Kɛ k’u ka baarakɛcogo Dabila pewu.

Lien fɔlɔ Ka tugu
html ye 
<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>

Butɔnw bloki

Aw bɛ jaabiw dilan ni u bonya dafalen ye, “block buttons” i n’a fɔ Bootstrap 4 kɔnɔ taw ni an ka jiralan ni gap nafalanw ɲagaminen ye. Ni an bɛ baara kɛ ni nafamafɛnw ye butɔni kɛrɛnkɛrɛnnenw ka kalasiw nɔ na, ​​an bɛ se ka fanga sɔrɔ kosɛbɛ yɔrɔjan, ɲɔgɔndan ani jaabi kɛcogo kan.

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

Yan an bɛ jaabi-yɔrɔ-ko dɔ Dabɔ, k’a Daminɛ ni butɔni jɔlenw ye fo ka Se mdkariyɔrɔ ma, yɔrɔ min bɛ kalasi .d-md-blocknɔnabila , o cogo la ka nafalan in Kɛ fu ye. I ka navigatɛri bonya caman sɛmɛntiya walisa k’a ye k’u bɛ fɛn caman Changer..d-gridgap-2

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

Aw bɛ se ka aw ka bloki butɔni bonya ladilan ni grid column width classes ye. Misali la, “blɔki butɔni” tilancɛ bonya kama, baara kɛ ni .col-6. A cɛmancɛ la ni .mx-auto, fana ye.

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

Nafa wɛrɛw bɛ se ka kɛ ka butɔniw labɛncogo ladilan ni u bɛ jɛgɛn. Yan an y'an ka jaabi misali tɛmɛnen Tà k'a Fàra flex utilité dɔw kan ani margin utilité dɔ kan butɔni kan ka butɔniw Labɛn kinin fɛ n'u ma Sìgi ɲɔgɔn kan tugun.

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

Butɔnw ka plugin

Butɔn plugin bɛ a to i ka se ka on/off toggle button nɔgɔmanw dilan.

Yecogo la, o bεnkansεbεnw ni bεnkansεbεnw bε kelen ye . Nka, u bɛ Lase cogo wɛrɛ la dɛmɛ fɛɛrɛw fɛ : jatebɔ-yɔrɔ-yɔrɔ-yɔrɔ-ko-yɔrɔw bɛna Laseli ekran-kalanbagaw fɛ ko “sɛgɛsɛgɛli”/“sɛgɛsɛgɛli ma Kɛ” (k’a sababu Kɛ, hali n’u yecogo ye, u jɔyɔrɔba ye jatebɔ-yɔrɔ ye halibi), k’a sɔrɔ o jatebɔ-yɔrɔ-yɔrɔ-ko-butɔnw bɛna Laseli i n’a fɔ “butɔni”/“butɔni digilen”. Sugandili min bɛ kɛ nin fɛɛrɛ fila ninnu cɛ, o bɛna bɔ i bɛ ka toggle suguya min Dabɔ, ani ni toggle bɛna kɛ sababu ye walima n’a tɛna kɛ sababu ye ka baarakɛlaw la ni a laseli kɛra i n’a fɔ jatebɔyɔrɔ walima i n’a fɔ butɔni yɛrɛ.

Toggle jamanaw

A fara a kan data-bs-toggle="button"ka butɔni dɔ activecogoya wuli. N’i ​​bɛ butɔni dɔ wuli ka kɔn, i ka kan ka .activekalansen fara a kan i bolo fɛ ani aria-pressed="true" k’a lajɛ k’a lase cogo bɛnnen na dɛmɛni fɛɛrɛw ma.

html ye 
<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 ka jɛgɛn Lien toggle min bɛ baara la Toggle link min bɛ baara la
html ye 
<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>

Fɛɛrɛw

Aw bɛ se ka butɔni misali dɔ dabɔ ni butɔni dilanbaga ye, misali la:

const bsButton = new bootstrap.Button('#myButton')
Kɛcogo Cogojirali
dispose A bɛ element dɔ ka butɔni tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance Static method min b’a to i bɛ se ka butɔni instance sɔrɔ min bɛ tali kɛ DOM element dɔ la, i bɛ se ka baara kɛ n’a ye nin cogo la: bootstrap.Button.getInstance(element).
getOrCreateInstance Fɛɛrɛ jɔlen min bɛ butɔni misali dɔ Lasegin min bɛ tali Kɛ DOM fɛn dɔ la walima ka kura Dabɔ n'a ma Daminɛ. Aw bɛ se ka baara kɛ n’a ye nin cogo la: bootstrap.Button.getOrCreateInstance(element).
toggle Toggles push jamana. A bɛ butɔni di i n’a fɔ a bɛ baara la.

Misali la, ka butɔni bɛɛ wuli

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

CSS ye

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ dɔ ye min bɛ ka wuli ka bɔ a nɔ na, ​​butɔni bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .btnwalasa ka waati yɛrɛyɛrɛ ladamucogo ɲɛ. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

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

Modifier classe kelen-kelen bɛɛ .btn-*bɛ CSS variables bɛnnenw kuraya walasa ka CSS sariya wɛrɛw dɔgɔya ni an ka button-variant(), button-outline-variant(), ani button-size()mixins ye.

Nin ye misali ye ka ɲɛsin custom .btn-*modifier class jɔli ma i n’a fɔ an b’a kɛ cogo min na butɔni minnu tɛ kelen ye an ka docs la ni Bootstrap ka CSS variables (daɲɛw sɛgɛsɛgɛli) seginni ye ni an yɛrɛ ka CSS ni Sass variables ɲagaminen ye.

.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 bεε bε bεn

$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 ka mixinw

Mixin saba bɛ butɔni kama: butɔni ani butɔni outline variant mixin (u fila bɛɛ sinsinnen bɛ $theme-colors), ka fara butɔni hakɛ mixin kan.

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

Sass ka wuluwuluw

Butɔn suguya caman (butɔni basigilenw ni jatebɔlanw kama) bɛ baara Kɛ n’u ka mixins kelen-kelenw ye n’an ka $theme-colorskarti ye walasa ka fɛn caman sɛgɛsɛgɛli Kɛ 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);
  }
}