Bootstrap Butonlar (Buttons)

Web tasarımı öğrenme yolculuğumuzda, kullanıcıların sitenizle en çok etkileşime girdiği öğelere, yani Butonlara (Buttons) geldik. İster bir e-ticaret sitesindeki “Sepete Ekle” tuşu olsun, ister bir blogdaki “Devamını Oku” linki; butonlar bir web sitesinin temel çağrı (Call to Action – CTA) merkezleridir. Arama motoru optimizasyonu (SEO) ve kullanıcı deneyimi (UX) açısından doğru konumlandırılmış, dikkat çekici ve her cihaza uyumlu butonlar tasarlamak hayati önem taşır.

Bootstrap 5, sıfırdan uzun CSS kodları yazmanıza gerek kalmadan, sadece birkaç basit HTML sınıfı (class) ekleyerek modern, şık ve etkileşimli butonlar oluşturmanıza olanak tanır. Bu rehberde, Bootstrap butonlarının temel kullanımından, Bootstrap 5 ile gelen devrim niteliğindeki yeniliklere kadar her şeyi bol örneklerle öğreneceğiz.

1. Temel Buton Kullanımı ve Semantik Renkler

Standart bir HTML butonunu <button> veya <a> etiketiyle oluşturduğunuzda, tarayıcıların sunduğu gri ve eski moda bir tasarımla karşılaşırsınız. Bootstrap’te bir öğeyi modern bir butona çevirmek için öncelikle .btn sınıfını eklemeniz gerekir. Bu sınıf, butonun temel yapısal özelliklerini (iç boşluklar, hizalama, font yapısı) sıfırlar.

Hemen ardından, butona bir renk ve anlam katmak için, önceki derslerimizde öğrendiğimiz “semantik renk paleti” sınıflarını ekleriz.

Örnek Temel Butonlar:

<div class="container mt-4">
  <!-- Birincil (Ana) Eylem Butonu -->
  <button type="button" class="btn btn-primary">Kaydet</button>

  <!-- İkincil Eylem Butonu -->
  <button type="button" class="btn btn-secondary">İptal</button>

  <!-- Başarılı İşlem Butonu -->
  <button type="button" class="btn btn-success">Onayla</button>

  <!-- Tehlike/Silme Butonu -->
  <button type="button" class="btn btn-danger">Sil</button>

  <!-- Uyarı Butonu -->
  <button type="button" class="btn btn-warning">Dikkat</button>

  <!-- Bilgi Butonu -->
  <button type="button" class="btn btn-info">Detaylar</button>
</div>

Bootstrap 5 ile birlikte butonların üzerine gelindiğinde (hover) veya tıklandığında (active) oluşan renk kontrastları, okunabilirliği ve erişilebilirliği (accessibility) artırmak adına çok daha belirgin hale getirilmiştir.

2. Dış Çizgili (Outline) Butonlar

Eğer sayfanızda çok fazla buton varsa ve hepsinin içinin dolu (katı renkli) olması tasarımı boğuyorsa, Dış Çizgili (Outline) butonlar harika bir alternatiftir. Bu butonların arka planı şeffaftır ve sadece kenarlıkları renklidir. Kullanıcı fare ile butonun üzerine geldiğinde ise renkli arka plan yumuşak bir geçişle (transition) dolar.

Bu görünümü elde etmek için btn- ile renk adının arasına outline kelimesini eklemeniz yeterlidir:

Örnek Dış Çizgili Butonlar:

<div class="container mt-4">
  <button type="button" class="btn btn-outline-primary">Daha Fazla Oku</button>
  <button type="button" class="btn btn-outline-success">Sepete Ekle</button>
  <button type="button" class="btn btn-outline-danger">Aboneliği İptal Et</button>
</div>

3. Buton Boyutlandırma (Sizing)

Her buton aynı boyutta olmak zorunda değildir. Ana sayfadaki devasa bir “Hemen Başla” butonu ile, bir tablonun satırında yer alan “Düzenle” butonu farklı boyutlara ihtiyaç duyar. CSS ile yükseklik ve genişlik ayarlamak yerine Bootstrap’in boyut sınıflarını kullanırız:

• Büyük Butonlar: .btn-lg sınıfı (Large) ile daha geniş iç boşluklara ve daha büyük fontlara sahip butonlar elde edersiniz.
• Küçük Butonlar: .btn-sm sınıfı (Small) ile dar alanlar için ideal olan minik butonlar oluşturursunuz.

Örnek Boyutlandırma:

<button type="button" class="btn btn-primary btn-lg">Hemen Ücretsiz Başla (Büyük)</button>
<button type="button" class="btn btn-secondary">Standart Boyut</button>
<button type="button" class="btn btn-danger btn-sm">Sil (Küçük)</button>

4. Bootstrap 5’teki En Büyük Değişim: Tam Genişlikte (Block) Butonlar

Eğer daha önceden Bootstrap 4 kullandıysanız veya eski eğitimleri izlediyseniz, bir butonu ekranın baştan sona tamamını (veya bulunduğu kutunun %100’ünü) kaplayacak hale getirmek için .btn-block sınıfının kullanıldığını hatırlarsınız.

Ancak dikkat! Bootstrap 5 sürümünde .btn-block sınıfı tamamen kaldırılmıştır.

Bootstrap 5, bunun yerine modern CSS Grid ve Flexbox mantığını benimsemiştir. Artık tam genişlikte butonlar yapmak için butona bir sınıf vermek yerine, butonu saran dış kutuya (wrapper) .d-grid (Display Grid) sınıfını veriyoruz. Butonlar arasında boşluk bırakmak için ise .gap-* yardımcı sınıflarını kullanıyoruz.

Örnek Tam Genişlikte Buton Yapımı (Bootstrap 5 Usulü):

<!-- Dış kapsayıcıya .d-grid ve boşluk için .gap-2 veriyoruz -->
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Geniş Buton 1</button>
  <button class="btn btn-secondary" type="button">Geniş Buton 2</button>
</div>

SEO İpucu: Özellikle mobil cihazlarda (akıllı telefonlar) kullanıcıların başparmaklarıyla rahat tıklayabilmesi için form gönderim (Submit) butonlarını bu şekilde tam genişlikte (.d-grid) yapmak dönüşüm oranlarınızı (Conversion Rate) artırır.

5. Devre Dışı (Disabled) Durumlar

Kullanıcı bir formu eksik doldurduğunda butonun tıklanmasını engellemek isteyebilirsiniz. HTML’in standart disabled niteliğini (attribute) butona eklediğinizde, Bootstrap butonu otomatik olarak soluklaştırır.

Bootstrap 5 ile birlikte devre dışı bırakılmış butonlara CSS üzerinden pointer-events: none; özelliği eklenmiştir. Bu sayede farenin tıklama veya üzerine gelme (hover) olayları sistem tarafından tamamen engellenir ve tam bir güvenlik sağlanır.

<button type="button" class="btn btn-primary" disabled>Tıklanamaz Buton</button>
<a href="#" class="btn btn-success disabled" tabindex="-1" role="button" aria-disabled="true">Tıklanamaz Link Butonu</a>

6. JavaScript Gerektirmeyen Yeni Geçiş (Toggle) Butonları

Bootstrap 5’in geliştiricilere sunduğu en güzel kolaylıklardan biri de onay kutuları (checkbox) veya radyo düğmeleri (radio buttons) için kullanılan “Toggle” butonlarındaki köklü değişikliktir.

Önceki sürümlerde butonların bu şekilde davranması için JavaScript’e ve fazladan sarıcı HTML etiketlerine ihtiyaç duyulurken, Bootstrap 5’te JavaScript zorunluluğu ortadan kalkmış ve yepyeni, tertemiz bir HTML yapısına geçilmiştir. Artık <input> etiketine doğrudan .btn-check sınıfını ekleyip, ona bağlı <label> etiketine de buton sınıflarını (örn: .btn btn-primary) vererek harika geçiş butonları elde edebiliyoruz.

Örnek Toggle (Aç/Kapat) Butonu:

<div class="container mt-4">
  <!-- Checkbox Input alanı (Gizli ama işlevsel) -->
  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">

  <!-- Görsel Buton kısmı (Label) -->
  <label class="btn btn-outline-primary" for="btn-check">Beni Seç</label>
</div>

Bu kullanım, sadece görsel olarak şık durmakla kalmaz, aynı zamanda form gönderimlerinde standart bir “checkbox” verisi ilettiği için arka plan (backend) geliştiricilerinin işini olağanüstü kolaylaştırır.

7. İleri Seviye: Sass ile Butonları Markanıza Göre Özelleştirin

Bootstrap’in standart mavi, kırmızı, yeşil butonları harikadır ancak profesyonel bir projede kendi kurumsal kimliğinize ait buton tasarımlarını kullanmak isteyebilirsiniz. Bootstrap 5’in “Sass” altyapısı sayesinde binlerce satır CSS yazıp “override” (ezme) işlemi yapmak yerine, sadece birkaç değişkeni (variable) değiştirerek tüm sitedeki butonların şeklini saniyeler içinde yenileyebilirsiniz.

Örneğin, butonların varsayılan iç boşluklarını (padding) büyütmek, kenar kıvrımlarını (border-radius) tam yuvarlak hap (pill) şekline getirmek ve yazı kalınlığını (font-weight) artırmak için özel Sass dosyanıza (örn: custom.scss) şu kodları eklemeniz yeterlidir:

// Butonların daha kalın yazılara sahip olması için
$btn-font-weight: 600;

// Butonların iç dikey ve yatay boşluklarını artırarak daha büyük görünmesini sağlamak için
$btn-padding-y: 0.75rem;
$btn-padding-x: 1.5rem;

// Tüm butonların köşelerini tam yuvarlak yapmak için (Hap / Pill tasarım)
$btn-border-radius: 50rem;

// Daha sonra Bootstrap'i içe aktarıyoruz
@import "node_modules/bootstrap/scss/bootstrap";

Bu Sass değişkenleri modifiye edildiğinde, Bootstrap sizin için CSS’i yeniden derler ve sitedeki bütün butonlar anında sizin belirlediğiniz bu yeni ölçülere göre şekil alır.

Sonuç

Butonlar, web sitenizdeki sessiz satıcılardır. Kullanıcıları bir makaleyi okumaya, bir ürünü satın almaya veya bültene abone olmaya ikna eden yegane unsurlardır. Bootstrap 5’in sunduğu .btn, renk (.btn-primary), dış çizgi (.btn-outline) ve grid altyapılı (.d-grid) tam ekran boyutlandırma özellikleri sayesinde, SEO açısından değerli ve mobil cihazlarda kusursuz çalışan kullanıcı deneyimleri inşa edebilirsiniz.

Yukarıdaki kod parçacıklarını kendi HTML dosyalarınıza kopyalayın, farklı renkleri ve boyutları birbiriyle birleştirerek projeniz için en iyi tasarımları oluşturmaya hemen başlayın!