بٹن

بوٹسٹریپ کے حسب ضرورت بٹن اسٹائلز کو فارمز، ڈائیلاگ اور مزید میں ایکشن کے لیے استعمال کریں جس میں ایک سے زیادہ سائز، اسٹیٹس، اور مزید کے لیے سپورٹ ہے۔

اس صفحہ پر

مثالیں

بوٹسٹریپ میں کئی پہلے سے طے شدہ بٹن اسٹائلز شامل ہیں، جن میں سے ہر ایک اپنے اپنے معنوی مقصد کو پورا کرتا ہے، جس میں مزید کنٹرول کے لیے کچھ اضافی چیزیں ڈالی جاتی ہیں۔

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>s 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انتساب کو غیر فعال لنک پر رکھنا پڑتا ہے، .disabledکلاس s کی pointer-events: noneلنک کی فعالیت کو غیر فعال کرنے کی کوشش کرتی ہے <a>۔ نوٹ کریں کہ یہ CSS پراپرٹی ابھی تک HTML کے لیے معیاری نہیں ہے، لیکن تمام جدید براؤزر اس کی حمایت کرتے ہیں۔ اس کے علاوہ، ایسے براؤزرز میں بھی جو سپورٹ کرتے ہیں pointer-events: none، کی بورڈ نیویگیشن متاثر نہیں ہوتی، مطلب یہ ہے کہ دیکھنے والے کی بورڈ استعمال کرنے والے اور معاون ٹیکنالوجیز کے استعمال کرنے والے اب بھی ان لنکس کو فعال کر سکیں گے۔ اس لیے محفوظ رہنے کے لیے، کے علاوہ aria-disabled="true"، ان لنکس پر ایک وصف بھی شامل tabindex="-1"کریں تاکہ انہیں کی بورڈ فوکس حاصل کرنے سے روکا جا سکے، اور ان کی فعالیت کو مکمل طور پر غیر فعال کرنے کے لیے حسب ضرورت JavaScript کا استعمال کریں۔

بنیادی لنک لنک

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

سی ایس ایس

متغیرات

v5.2.0 میں شامل کیا گیا۔

بوٹسٹریپ کے ابھرتے ہوئے CSS متغیر کے نقطہ نظر کے ایک حصے کے طور پر، بٹن اب مقامی CSS متغیرات .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 متغیرات کو اپ ڈیٹ کرتی ہے تاکہ ہمارے button-variant(), button-outline-variant(), اور button-size()mixins کے ساتھ اضافی CSS قوانین کو کم سے کم کیا جا سکے۔

یہاں ایک حسب ضرورت موڈیفائر کلاس بنانے کی ایک مثال ہے .btn-*جیسا کہ ہم اپنے دستاویزات کے لیے منفرد بٹن کے لیے بوٹسٹریپ کے سی ایس ایس متغیرات کو اپنے سی ایس ایس اور سی ایس ایس متغیر کے مرکب کے ساتھ دوبارہ تفویض کرتے ہیں۔

.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 متغیرات

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