İyi buton tasarımı, bir arayüzün en çok dokunulan parçasını güvenilir kılmakla ilgilidir. Bir buton sadece renkli bir dikdörtgen değildir; tıklanabilir olduğunu hisseden, durumunu açıkça gösteren ve klavyeyle de kullanılabilen bir kontroldür. Bu yazıda iyi bir butonu state (durum), boyut ve kontrast üçgeni üzerinden kuruyoruz ve hem Figma'da hem de gerçek CSS'te uygulanabilir bir çerçeve çıkarıyoruz.
Buton neden zor bir bileşendir?
Buton küçük göründüğü için tasarımda en sona bırakılır, oysa bir üründe en sık etkileşilen öğedir. Kullanıcı bir butona baktığında üç sorunun cevabını saniyeler içinde vermek ister: Tıklanabilir mi? Şu anda hangi durumda? Ne yapacak? Bu soruların cevabı net değilse kullanıcı tereddüt eder, yanlış tıklar veya hiç tıklamaz. Bu yüzden buton tasarımı görsel bir süs değil, bir iletişim meselesidir.
İyi bir buton şu temel niteliklere sahiptir:
- Tıklanabilirlik (affordance): Çevresinden ayrışır, dolgu/gölge/kenarlıkla "basılabilir" görünür.
- Durum geri bildirimi: Üzerine gelince, basılınca, odaklanınca ve devre dışıyken farklı görünür.
- Hiyerarşi: Birincil eylem ikincil ve üçüncül eylemlerden net biçimde öne çıkar.
- Erişilebilirlik: Kontrast yeterlidir, klavye ve ekran okuyucuyla çalışır.
State'ler: bir butonun gizli yarısı
Statik bir buton tasarımı işin yarısıdır. Asıl mesele butonun durumları arasında nasıl davrandığıdır. Pratikte tasarlamanız gereken state'ler şunlardır:
- Default — dinlenme hali.
- Hover — imleç üzerindeyken (yalnızca işaretçi cihazlarda).
- Active / Pressed — basıldığı an, genelde hafif koyulaşma veya 1px aşağı kayma.
- Focus — klavyeyle gezinirken görünür bir halka.
- Disabled — etkileşime kapalı, düşük kontrast.
- Loading — eylem sürüyor, spinner veya metin değişimi.
Figma'da bunları bir Component ve variant'lar olarak kurmak, geliştirmeyle birebir eşleşmeyi kolaylaştırır. CSS tarafında ise her state bir sözde sınıfa karşılık gelir:
.btn {
--bg: #2563eb;
background: var(--bg);
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 16px;
font: 600 15px/1 system-ui, sans-serif;
cursor: pointer;
transition: background .15s ease, transform .05s ease;
}
.btn:hover { --bg: #1d4ed8; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.btn:disabled {
--bg: #cbd5e1;
color: #f1f5f9;
cursor: not-allowed;
}Dikkat: :focus-visible kullanmak, fareyle tıklayan kullanıcıya gereksiz halka göstermeden klavye kullanıcısına net bir odak işareti verir. Odak halkasını asla tamamen kaldırmayın; bu erişilebilirliği bozan en yaygın hatadır.
Boyut, tıklama alanı ve dokunmatik hedefler
Bir buton görsel olarak ne kadar büyük olursa olsun, asıl önemli olan tıklanabilir alanın büyüklüğüdür. Mobilde özellikle parmakla isabetli dokunmak için hedeflerin yeterince geniş olması gerekir. Genel kabul gören rehberler:
- Minimum dokunma hedefi ~44×44 px (Apple) / ~48×48 dp (Google Material) civarı.
- Metin yüksekliği değil, dolgu (padding) butonun gerçek tıklama alanını belirler.
- Yan yana butonlar arasında en az 8px boşluk bırakın ki yanlış dokunma azalsın.
İkonlu küçük butonlarda görünür kutu küçük olsa bile dokunma alanını şeffaf padding ile büyütebilirsiniz. Boyut ölçeğini de bir sistem olarak düşünün: sm, md, lg gibi üç adım çoğu ürün için yeterlidir ve padding ile font-size birlikte ölçeklenir.
Kontrast ve hiyerarşi
Birden çok buton aynı ekranda olduğunda kullanıcı hangisinin asıl eylem olduğunu anında anlamalıdır. Bunu renk doygunluğu ve dolgu ile kurarsınız:
- Primary — dolu, yüksek kontrastlı, sayfada genelde bir tane.
- Secondary — kenarlıklı (outline) veya açık dolgulu, daha sakin.
- Tertiary / Ghost — sadece metin, en düşük ağırlık.
Erişilebilirlik için WCAG metin kontrast oranlarını hedefleyin: normal metin için en az 4.5:1, büyük/kalın metin için 3:1. Mavi zemin üzerinde beyaz yazı genelde güvenlidir; ama açık gri zemin üzerinde açık gri yazıdan kaçının. Yalnızca renge güvenmeyin; disabled durumu sadece soluklaştırmakla kalmayıp ek bir ipucu (örneğin imleç değişimi) ile destekleyin, çünkü renk körü kullanıcılar yalnızca tonu ayırt edemeyebilir.
Etiket, ikon ve mikro kopya
Butonun metni, tasarımı kadar önemlidir. İyi etiketler eylem odaklıdır ve sonucu söyler: "Kaydet" yerine "Değişiklikleri Kaydet", "Gönder" yerine "Mesajı Gönder" çoğu zaman daha nettir. Birkaç pratik kural:
- Fiille başlayın, kısa tutun (1–3 kelime).
- İkon kullanıyorsanız metinle aynı anlamı pekiştirsin, çelişmesin.
- Sadece ikon içeren butona mutlaka
aria-labelverin.
<button class="btn" aria-label="Sepete ekle">
<svg aria-hidden="true" focusable="false" ...></svg>
</button>Burada aria-hidden="true" ikonu ekran okuyucudan gizler, aria-label ise anlamı metin olarak sağlar. Yükleme durumunda butonu disabled yapıp metni "Kaydediliyor…" gibi değiştirmek, çift tıklamayı da engeller.
Bir buton sistemi kurmak
Tek tek buton çizmek yerine token tabanlı bir sistem kurun. Renk, yarıçap, boşluk ve tipografi değerlerini değişkenlerde tutun; varyantları bu değişkenlerden türetin. Böylece markanız değiştiğinde tek yerden güncelleme yaparsınız ve tüm butonlar tutarlı kalır. Figma'da bunu component + variant + değişken (variables) ile, CSS'te ise custom property'lerle kurabilirsiniz. Tutarlılık, kullanıcının her butonu yeniden öğrenmek zorunda kalmamasını sağlar; bu da algılanan kaliteyi doğrudan yükseltir.
Sık Sorulan Sorular
Birincil butonun rengi ne olmalı?
Markanızın vurgu rengi mantıklı bir başlangıçtır, yeter ki üstündeki metinle en az 4.5:1 kontrast sağlasın. Sayfada genellikle tek bir birincil buton bulundurun; iki "ana eylem" kullanıcının kararını zorlaştırır.
Odak halkasını tasarım için kaldırabilir miyim?
Hayır. Odak halkasını kaldırmak klavye ve ekran okuyucu kullanıcıları için butonu kullanılamaz hale getirir. Daha şık görünmesini istiyorsanız outline rengini ve outline-offset değerini özelleştirin, ama :focus-visible ile mutlaka görünür bir işaret bırakın.
Devre dışı butonu mu yoksa hata mesajını mı tercih etmeliyim?
Çoğu durumda butonu aktif bırakıp tıklanınca eksikleri açıklayan bir mesaj göstermek, sessizce devre dışı bırakmaktan daha iyidir; çünkü disabled buton neden tıklanamadığını anlatmaz ve kullanıcı tıkanır.
Butonlarınız hâlâ "tıklanmıyor" gibi mi görünüyor? Arayüzünüzün state, kontrast ve erişilebilirlik açısından elden geçirilmesinde yardımcı olabilirim. Benimle iletişime geçin ve butonlarınızı hem güzel hem de işlevsel hale getirelim.