ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

መጠወቒታት

ንተግባራት ኣብ ቅጥዕታት፣ ዝርርባትን ካልእን ምስ ደገፍ ንብዙሕ ዓቐናት፣ ኩነታትን ካልእን ናይ Bootstrap ብሕታዊ ቅዲታት መጠወቒ ተጠቐም።

ኣብዚ ገጽ

ኣብነታት

ቡትስትራፕ ሓያሎ ኣቐዲሞም ዝተነጸሩ ቅዲታት መጠወቒ ዘጠቓልል ኮይኑ፡ ነፍሲ ወከፎም ናይ ገዛእ ርእሶም ትርጉማዊ ዕላማ ዘገልግሉ ኮይኖም፡ ንዝያዳ ምቁጽጻር ውሑዳት ተወሳኺ ዝድርበዩ እዮም።

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ክፍሊ ኣብቲ መጠወቒ ክትውስኾ ትኽእል ኢኻ። $btn-white-space: nowrapኣብ ሳስ ፡ ንነፍሲ ​​ወከፍ መጠወቒ ምጥቕላል ጽሑፍ ንምስንኻል ከተቐምጥ ትኽእል ኢኻ ።

ናይ መጠወቒ መለለዪታት

እቶም ክፍልታት ምስቲ ባእታ .btnንኽጥቀሙ ዝተዳለዉ እዮም ። ይኹን እምበር፡ ነዞም ክፍልታት ኣብ ወይ ባእታታት <button>እውን ክትጥቀመሎም ትኽእል ኢኻ (ዋላ እኳ ገለ ዳህሰስቲ ቁሩብ ዝተፈልየ ኣቀራርባ ክጥቀሙ ይኽእሉ እንተኾኑ)።<a><input>

<a>ኣብ ውሽጢ ገጽ ንዘሎ ተግባር ንምብጋስ ዝጥቀሙ ባእታታት (ከም ምዕጻፍ ትሕዝቶ)፡ ኣብ ክንዲ ናብ ሓደስቲ ገጻት ወይ ክፍልታት ኣብ ውሽጢ እቲ ህሉው ገጽ ምትእስሳር፡ ናይ መጠወቒ ክፍልታት ክትጥቀም ከለኻ ፡ እዞም መላግቦታት role="button"ዕላማኦም ናብ ከም ዝኣመሰሉ ሓገዝቲ ቴክኖሎጂታት ብግቡእ ንምትሕልላፍ a ክወሃቦም ይግባእ ስክሪን ሪደርስ ዝበሃሉ ምዃኖም ይፍለጥ።

ሊንክ
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"

መባእታዊ ሊንክ ሊንክ
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, too.

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 element ዝተዓቀበ ዳታ የወግድ)
getInstance ምስ ሓደ DOM element ዝተኣሳሰር ናይ መጠወቒ ምሳሌ ክትረክብ ዘኽእለካ ስታቲክ ሜላ፣ ከምዚ ጌርካ ክትጥቀመሉ ትኽእል ኢኻ 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 ተቐያየርቲ on ይጥቀሙ። ክብርታት ናይ 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);

ነፍሲ ወከፍ ናይ መቐየሪ ክፍሊ ተወሳኺ ናይ CSS ሕግታት ብናትና , , ከምኡውን ሚክሲን .btn-*ንምንካይ ነቶም ዝምልከቶም ተለዋዋጢ CSS የዘምኖም።button-variant()button-outline-variant()button-size()

ኣብዚ ከምቲ ንሕና ንdocs ፍሉያት ዝኾኑ መጠወቒታት እንገብሮ custom modifier class ንምህናጽ ኣብነት ናይ .btn-*Bootstrap CSS variables ብናይ ገዛእ ርእስና CSSን Sass variablesን ዝተሓዋወሰ ዳግማይ ብምምዳብ።

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