Bootstrap 5 Buton Sınıfları: btn, Boyutlar, Kapatma Butonu ve Button Group

.btn temel sınıfı ne yapar?

.btn tek başına renksiz bir iskelettir: şeffaf arka plan, şeffaf bir kenarlık, ortalanmış metin ve tıklanabilir imleç verir. Renk, ancak bir değiştirici sınıf eklendiğinde gelir. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıf şöyle tanımlıdır:

.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  /* (kısaltıldı) */
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Bu kuraldan çıkan pratik sonuçlar şunlardır: buton satır içi blok (inline-block) olduğu için yan yana dizilir ve genişliği içeriği kadardır; user-select: none sayesinde hızlı tıklamalarda metin seçilmez; kenarlık şeffaf de olsa 1px yer kaplar, bu yüzden outline varyantına geçtiğinizde butonun boyu değişmez. Dolgu değerleri rem cinsindendir; kök yazı boyutu 16px iken varsayılan buton 6px dikey, 12px yatay dolgu alır.

Renk varyantları: sekiz tema rengi ve btn-link

Renk sınıfları Sass tarafındaki $theme-colors haritasından döngüyle üretilir. Haritada sekiz anahtar vardır: primary, secondary, success, info, warning, danger, light ve dark. Her biri için hem dolu (.btn-primary) hem çerçeveli (.btn-outline-primary) sınıf oluşur. Bunlara ek olarak butonu bağlantı gibi gösteren .btn-link vardır; normal yazı kalınlığı ve bağlantı rengi kullanır, ama buton boyutlarını ve dolgusunu korur.

<button type="button" class="btn btn-primary">Kaydet</button>
<button type="button" class="btn btn-secondary">Vazgeç</button>
<button type="button" class="btn btn-success">Onayla</button>
<button type="button" class="btn btn-danger">Sil</button>
<button type="button" class="btn btn-warning">Uyar</button>
<button type="button" class="btn btn-info">Bilgi</button>
<button type="button" class="btn btn-light">Açık</button>
<button type="button" class="btn btn-dark">Koyu</button>
<button type="button" class="btn btn-link">Bağlantı gibi</button>

Dolu varyantlarda metin rengini siz seçmezsiniz: button-variant() mixin'i arka plana karşı yeterli kontrast veren rengi color-contrast() fonksiyonuyla hesaplar. Bu yüzden .btn-warning ve .btn-light koyu metinle, .btn-primary ise beyaz metinle derlenir. Renk paletini değiştirmek isterseniz sınıfları tek tek ezmek yerine Sass haritasını düzenleyin; bunun yolu Bootstrap tema renkleri yazısında anlatılıyor.

Outline butonlar ne zaman tercih edilir?

.btn-outline-* sınıfları arka plan rengini ve arka plan görsellerini kaldırır; geriye renkli kenarlık ve renkli metin kalır. Fareyle üzerine gelindiğinde, odaklandığında ya da .active durumunda zemin o renkle dolar. Tipik kullanım, bir ekranda tek bir ana eylemi dolu butonla, ikincil eylemleri outline butonla göstermektir. Resmî Pricing şablonunda ücretsiz paket için btn-outline-primary, ücretli paketler için btn-primary kullanılması bu ayrıma güzel bir örnektir.

Belgelerin uyardığı bir nokta var: bazı varyantların metin rengi açıktır ve yalnızca koyu zemin üzerinde yeterli kontrast sağlar. Örneğin .btn-outline-light beyaz bir sayfada neredeyse görünmez; bunu koyu bir navbar ya da .bg-dark bir bölüm içinde kullanın.

Boyutlar: btn-lg ve btn-sm

Bootstrap 5.0'da iki ek boyut vardır. Derlenmiş CSS'te .btn-lg dolguyu 0.5rem 1rem, yazı boyutunu 1.25rem, köşe yarıçapını 0.3rem yapar; .btn-sm ise 0.25rem 0.5rem dolgu, 0.875rem yazı ve 0.2rem yarıçap verir. Aynı kurallar .btn-group-lg > .btn ve .btn-group-sm > .btn seçicilerine de bağlıdır, yani bir grubun tamamını tek sınıfla büyütüp küçültebilirsiniz.

<button type="button" class="btn btn-primary btn-lg">Büyük buton</button>
<button type="button" class="btn btn-primary">Normal buton</button>
<button type="button" class="btn btn-primary btn-sm">Küçük buton</button>

Butonu bulunduğu alanın tamamına yaymak için ayrı bir sınıf yoktur. Pricing şablonunda olduğu gibi .w-100 genişlik yardımcısını eklemek ya da aşağıda anlatılan blok buton kalıbını kullanmak gerekir.

Hangi etiket: button, a yoksa input?

.btn sınıfları öncelikle <button> için tasarlanmıştır, ancak <a> ve <input> üzerinde de çalışır. Belgeler, bazı tarayıcıların bu öğeleri biraz farklı çizebileceğini not eder. Seçim kuralı basittir: başka bir sayfaya ya da sayfadaki bir bölüme gidiyorsanız bağlantı, sayfada bir iş yapıyorsanız (form gönderme, panel açma) buton kullanın. Sayfa içi bir işlevi tetiklemek için <a> kullanmak zorundaysanız ona role="button" ekleyin ki ekran okuyucular öğenin amacını doğru duyursun.

<a class="btn btn-primary" href="#" role="button">Fiyatlara git</a>
<button class="btn btn-primary" type="submit">Gönder</button>
<input class="btn btn-primary" type="button" value="Input buton">
<input class="btn btn-secondary" type="reset" value="Formu temizle">

Devre dışı butonlar: button ile a farklı davranır

<button> öğesini devre dışı bırakmak için disabled boolean özniteliği yeterlidir. Bootstrap bu durumda pointer-events: none uygular ve opaklığı $btn-disabled-opacity değerine (0.65) indirir; böylece üzerine gelme ve basılı durumları tetiklenmez. Kaynakta aynı kural fieldset:disabled .btn seçicisini de kapsar, yani devre dışı bir <fieldset> içindeki butonlar da soluk görünür.

<a> öğesi disabled özniteliğini desteklemez. Bağlantı butonunu pasif göstermek için .disabled sınıfını, durumu yardımcı teknolojilere bildirmek için aria-disabled="true" özniteliğini eklersiniz. Belgeler burada önemli bir uyarı yapar: pointer-events: none fare tıklamasını engellese de klavyeyi engellemez. Tab tuşuyla bağlantıya gelen kullanıcı Enter'a basarak onu hâlâ açabilir. Bu nedenle tabindex="-1" ekleyip, gerekiyorsa işlevi kendi JavaScript kodunuzla da kapatın.

<button type="button" class="btn btn-primary" disabled>Gönderiliyor</button>

<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Pasif bağlantı</a>

Blok butonlar: v5'te d-grid ve gap ile

Bootstrap 4'teki .btn-block sınıfı v5'te kaldırıldı; geçiş belgesi bunun yerine butonları .d-grid ve bir .gap-* yardımcısıyla sarmalamayı önerir (sürüm farklarının tamamı Bootstrap 4'ten 5'e geçiş yazısında). Grid kapsayıcısı içindeki her buton satırın tamamını kaplar ve aralarındaki boşluğu gap-2 belirler.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-outline-secondary me-md-2" type="button">Vazgeç</button>
  <button class="btn btn-primary" type="button">Kaydet</button>
</div>

Bu örnek mobil öncelikli çalışır: md kırılma noktasının altında butonlar alt alta ve tam genişliktedir; md ve üstünde .d-md-flex grid düzenini flex ile değiştirir, justify-content-md-end butonları sağa yaslar, me-md-2 de ilk butonun sağına boşluk koyar. Yarım genişlikte, ortalanmış bir blok için belgeler d-grid gap-2 col-6 mx-auto birleşimini gösterir. Bu yardımcıların kendisi display sınıfları, flex yardımcıları ve boşluk sınıfları yazılarında ayrıca anlatılıyor.

Buton metninin satır sonunda kırılmasını istemiyorsanız butona .text-nowrap ekleyin. Tüm butonlar için aynı davranışı Sass tarafında $btn-white-space: nowrap değişkeniyle de açabilirsiniz; varsayılan değer null'dır, yani metin normalde kırılabilir.

Kapatma butonu: btn-close

Modal, alert, toast ve offcanvas gibi bileşenleri kapatmak için genel bir .btn-close sınıfı vardır. v5'te v4'teki .close sınıfının adı .btn-close olarak değişti ve çarpı işareti HTML içindeki × karakteri yerine gömülü bir SVG arka plan görseliyle çizilmeye başlandı. Butonun içi boş olduğu için ekran okuyucuya ne yaptığını söyleyen aria-label mutlaka yazılmalıdır.

<button type="button" class="btn-close" aria-label="Kapat"></button>
<button type="button" class="btn-close" disabled aria-label="Kapat"></button>

<div class="bg-dark p-3">
  <button type="button" class="btn-close btn-close-white" aria-label="Kapat"></button>
</div>

Kaynak koddaki değişkenlere göre kapatma butonu varsayılan olarak 0.5 opaklıkla durur, üzerine gelince 0.75'e, odakta 1'e çıkar; devre dışıyken 0.25'e düşer ve pointer-events: none ile user-select: none alır. Koyu zeminler için .btn-close-white, filter özelliğiyle siyah ikonu tersine çevirerek beyaz gösterir.

Buton grubu: btn-group ve btn-toolbar

Birbiriyle ilişkili butonları tek parça göstermek için onları .btn-group ile sarmalarsınız. Bootstrap aradaki köşe yuvarlaklıklarını kaldırır ve kenarlıkları birleştirir. Grubun ekran okuyuculara grup olarak tanıtılması için role="group", birden fazla grubu bir araya getiren araç çubuğu için role="toolbar" gerekir. Belgelere göre rol tek başına yetmez; çoğu yardımcı teknoloji etiketi olmayan grubu duyurmaz, bu yüzden aria-label ya da aria-labelledby ile açık bir ad verin.

<div class="btn-toolbar" role="toolbar" aria-label="Metin düzenleme araçları">
  <div class="btn-group me-2" role="group" aria-label="Biçim">
    <button type="button" class="btn btn-outline-secondary">Kalın</button>
    <button type="button" class="btn btn-outline-secondary">İtalik</button>
    <button type="button" class="btn btn-outline-secondary">Altı çizili</button>
  </div>
  <div class="btn-group btn-group-sm" role="group" aria-label="Geçmiş">
    <button type="button" class="btn btn-outline-secondary">Geri al</button>
    <button type="button" class="btn btn-outline-secondary">Yinele</button>
  </div>
</div>

Araç çubuğundaki gruplar arasında otomatik boşluk yoktur; örnekteki me-2 gibi boşluk yardımcılarıyla siz ayarlarsınız. Araç çubuğuna bir .input-group da koyabilirsiniz; gruplar arasını iki uca yaymak için .btn-toolbar üzerine justify-content-between eklemek yeterlidir. Boyut için her butona ayrı ayrı .btn-sm yazmak yerine gruba .btn-group-sm ya da .btn-group-lg ekleyin; iç içe gruplarda bu sınıf her gruba ayrıca yazılır.

Bir grup içine açılır menü koymak için içe ikinci bir .btn-group yerleştirilir ve menü tetikleyicisi data-bs-toggle="dropdown" alır; açılır menünün kendisi Bootstrap dropdown yazısının konusu. Butonları alt alta dizmek için .btn-group yerine .btn-group-vertical kullanılır; belgelere göre dikey grupta bölünmüş (split) dropdown butonları desteklenmez.

Onay kutusu ve radyo düğmesinden buton grubu

Buton görünümlü onay kutuları ve radyo düğmeleri v5'te JavaScript gerektirmez. Gerçek <input> öğesine .btn-check, onu izleyen <label> öğesine .btn sınıfları verilir; bu çiftleri bir .btn-group içine koyunca bitişik bir seçim çubuğu elde edersiniz. Aynı name değerini paylaşan radyolardan yalnızca biri seçili olur.

<div class="btn-group" role="group" aria-label="Fatura dönemi">
  <input type="radio" class="btn-check" name="donem" id="donem-ay" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="donem-ay">Aylık</label>
  <input type="radio" class="btn-check" name="donem" id="donem-yil" autocomplete="off">
  <label class="btn btn-outline-primary" for="donem-yil">Yıllık</label>
</div>

Bu yapının form tarafı, yani .btn-check ile ilgili bütün kurallar, checkbox, radio ve switch yazısında anlatılıyor. Burada bilmeniz gereken, seçili radyonun etiketinin .active görünümünü otomatik aldığıdır; çünkü buton varyant mixin'i .btn-check:checked + .btn seçicisini de stillendirir.

Button eklentisi: aç/kapa butonları

Bootstrap'in küçük Button eklentisi tek bir işi yapar: tıklandıkça butonun .active sınıfını ekleyip kaldırır. Bunun için butona data-bs-toggle="button" yazmanız yeterlidir. v5.0.2 kaynak kodunda toggle() yöntemi sınıfı değiştirirken aria-pressed özniteliğini de aynı değere eşitler. Sayfa açıldığında basılı görünmesi gereken bir butonu ise elle hazırlarsınız: hem .active sınıfını hem aria-pressed="true" özniteliğini yazmak zorunludur.

<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off">Bildirimler</button>
<button type="button" class="btn btn-outline-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Sessiz mod</button>

Programla kontrol etmek isterseniz belgelerdeki kurucuyu kullanırsınız. Button sınıfının belgelenmiş yöntemleri toggle, dispose ile statik getInstance ve getOrCreateInstance'tır.

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
bsButton.toggle()

Bu kodun çalışması için sayfada Bootstrap'in JavaScript dosyasının yüklü olması gerekir; yükleme yolları CDN ile kurulum, genel JavaScript API mantığı ise Bootstrap JavaScript API yazısında. Belgeler önemli bir ayrım da yapar: aç/kapa buton ile onay kutusu butonu görsel olarak aynıdır, ama ekran okuyucu birini "buton, basılı" diye, diğerini "işaretli, işaretli değil" diye okur. Kullanıcıya hangisi anlamlı geliyorsa onu seçin; bir ayarı açıp kapatıyorsanız ve form verisi olarak gönderilecekse onay kutusu, sayfadaki bir görünümü değiştiriyorsanız aç/kapa buton daha doğal olur.

Uygulamalı mini örnek: kayıt formu alt çubuğu

Şimdi öğrendiklerinizi tek bir parçada birleştirelim. Bir ayar formunun altında solda tehlikeli bir eylem, sağda ise vazgeç ve kaydet butonları olsun. Mobilde hepsi alt alta, tam genişlikte dursun; md ve üstünde tek satıra dizilsin. Kaydet butonu formun gönderme butonu, diğerleri ise sıradan butonlardır.

<form>
  <div class="d-grid gap-2 d-md-flex justify-content-md-between">
    <button type="button" class="btn btn-outline-danger">Hesabı sil</button>
    <div class="d-grid gap-2 d-md-flex">
      <button type="button" class="btn btn-light">Vazgeç</button>
      <button type="submit" class="btn btn-primary">Değişiklikleri kaydet</button>
    </div>
  </div>
</form>

Burada tehlikeli eylem outline varyantla görsel olarak geri plana itilir, ana eylem dolu primary butondur. İç içe iki d-grid kullanmanın nedeni, sağdaki iki butonun dar ekranda da kendi aralarında gap-2 boşluğunu korumasıdır. justify-content-md-between geniş ekranda iki bloğu iki uca iter.

Sık yapılan hatalar

• Yalnızca renk sınıfı yazmak: class="btn-primary" tek başına dolgu ve kenarlık vermez; temel .btn sınıfı her zaman gerekir.
• v4 sınıflarını kullanmak: .btn-block, .close ve data-toggle="button" 5.0'da çalışmaz; yerlerine d-grid kalıbı, .btn-close ve data-bs-toggle="button" gelir.
• Bağlantıyı yalnızca .disabled ile kapatmak: Klavye erişimi açık kalır; tabindex="-1" ve aria-disabled="true" ekleyin.
• Grubun etiketini unutmak: role="group" olan ama aria-label almayan grup çoğu ekran okuyucuda hiç duyurulmaz.
• Form içinde type yazmamak: type belirtilmeyen buton formu gönderir.
• Açık renkli outline butonu açık zeminde kullanmak: .btn-outline-light beyaz zeminde zor okunur; belgeler açık ön plan renkli stilleri koyu zemine ayırmanızı önerir.
• Toggle butonu önceden basılı gösterip aria-pressed yazmamak: Görünüm basılı olur ama yardımcı teknoloji bunu bilmez.

Sık Sorulan Sorular

Bootstrap 5'te btn-block neden çalışmıyor?

Çünkü v5'te kaldırıldı. Butonları <div class="d-grid gap-2"> ile sarmalayın; tek bir butonu tam genişlik yapmak için .w-100 de kullanabilirsiniz.

Buton rengini kendi marka rengime nasıl çeviririm?

Sass ile derliyorsanız $primary değişkenini ya da $theme-colors haritasını değiştirin; buton döngüsü yeni rengi otomatik kullanır. Derlenmiş CSS kullanıyorsanız kendi sınıfınızı yazıp .btn ile birlikte uygulayabilirsiniz. Sass akışı Sass ile özelleştirme yazısında.

btn-group içinde butonlar neden alt satıra kaymıyor?

.btn-group derlenmiş CSS'te display: inline-flex kullanır ve butonları tek satırda tutar. Dar ekranda taşma oluyorsa grubu bölün, .btn-group-sm ile küçültün ya da .btn-group-vertical kullanın.

Kapatma butonunun rengini değiştirebilir miyim?

Koyu zemin için hazır .btn-close-white vardır. Başka bir renk için Sass tarafında $btn-close-color ya da doğrudan SVG'yi tutan $btn-close-bg değişkenini değiştirmeniz gerekir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Checkbox, radio ve switch · Dropdown menü · Badge ve spinner · JavaScript API · JavaScript öğrenme rehberi