Bir düğmeye bakıp “eh işte” dediğiniz oldu mu? Benim oldu. Hatta 2024’ün Şubat ayında, Kadıköy’de bir startup için hazırladığım arayüzde, en çok şikâyet alan şey ne biliyor musunuz… formdaki düğmelerdi. Renk kötüydü. Hover hissi yoktu. Tıklanabilirlik belirsizdi — yani kullanıcı daha başlamadan tereddüt ediyordu, ki bu gerçekten can sıkıcı bir durum. İşin aslı şu ki, küçük görünen bu detaylar bazen neredeyse tüm ürün algısını sırtlıyor.
Eh, CSS3 de tam burada devreye giriyor. Sadece “daha güzel buton” yapmak değil mesele; kullanıcıya neyin tıklanabilir olduğunu anlatmak, odak durumunu görünür kılmak, mobilde parmakla rahat basılacak alan açmak. Erişilebilirliği sağlamak… Bunların hepsi aynı paketin içinde. Açık konuşayım: Düğme tasarımı hâlâ birçok ekipte sonradan düşünülen bir konu gibi ele alınıyor. Halbuki ilk izlenim biraz da buradan geliyor.
Ben geçen ay Maslak’taki bir kurumsal panel çalışmasında bunu tekrar gördüm (yanlış duymadınız). Tasarım ekibi her şeyi cilalamıştı ama CTA düğmesi düz gri kalmıştı; dönüşüm oranı da beklediğimiz kadar iyi çıkmadı. Küçük bir renk farkı, biraz gölge, biraz geçiş efekti ve net bir odak çizgisiyle tablo değişti. Fena değil, hatta baya işe yaradı.
CSS3 neden hâlâ önemli?
CSS’in hikâyesi eskiye dayanıyor. Ama CSS3’le birlikte oyun ciddi biçimde değişti. İlginç, değil mi? Artık yalnızca sayfayı boyamakla uğraşmıyoruz; katmanlı efektler, yumuşak geçişler, gölgeler, kenarlık yarıçapları ve medya sorgularıyla cihazdan cihaza uyum sağlayan tasarımlar yapabiliyoruz — düğme dediğin şey de bundan nasibini alıyor tabii ki.
Şu noktayı özellikle seviyorum: CSS3 sayesinde tek bir HTML yapısıyla farklı ruh halleri oluşturabiliyorsunuz. Aynı buton; normal durumda sade, hover’da canlı, focus’ta erişilebilir ve disabled durumda dürüstçe “ben şu an pasifim” diyebiliyor. Bu küçük dramatik geçişler kullanıcı deneyimini bayağı toparlıyor.
Ha bu arada iş sadece görsellik değil. Kurumsal projelerde sık gördüğüm hata şu: tasarımcı estetik istiyor, geliştirici hız istiyor, ürün yöneticisi ise dönüşüm peşinde koşuyor. CSS3 burada ortak dil gibi çalışıyor. Biraz disiplinli kullanırsanız üç taraf da mutlu olabiliyor… en azından çoğu zaman.
İyi bir düğmenin temel taşları
Bak şimdi, Düğme tasarlarken ben önce üç şeye bakıyorum: okunabilirlik, boşluk ve geri bildirim. Yazının rengi arka planla çatışmayacak mı? Tıklama alanı yeterince büyük mü? Kullanıcı üzerine gelince veya bastığında ne olduğunu anlayacak mı? Basit sorular bunlar (eh, fena değil). Ama cevabı zayıf olan arayüzleri hemen ele veriyor.
Bence, Kendi not defterime 2023 yazında eklediğim bir satır var: “Güzel görünen ama belirsiz düğme = gizli sorun.” O dönem İzmir’de küçük bir e-ticaret denemesinde test yapıyorduk; sepet düğmesini fazla minimal yaptık diye mobil tarafta insanlar butonu kaçırdı resmen. Sonra padding’i artırdık, kontrastı yükselttik (ciddiyim). olay çözüldü. Bu konuyla ilgili Framework’ün Uyarısı: AI Dalgası PC’yi Nasıl Sıkıştırıyor? yazımıza da göz atmanızı tavsiye ederim.
Renk seçimi boşuna önemli değil
Renk konusu hep hafife alınıyor (buna dikkat edin). Kötü seçim direkt güven kaybettiriyor — bu kadar basit. Mavi genelde güven verir diyorlar ya… evet ama her mavi de aynı etkiyi yaratmıyor, koyu lacivert ile pastel ton arasında dağlar kadar fark var ve üstelik markanın kimliğiyle çelişen renkler kullanıcıda garip bir his bırakabiliyor (şaşırtıcı ama gerçek)
Ve işler burada ilginçleşiyor.
Bence burada altın kural şu: Düğme çevresindeki diğer öğelerle kavga etmemeli ama gerektiğinde öne çıkmalı da. Sahnede bağırmadan dikkat çekmek lazım. Zor iş. Siz hiç denediniz mi? Bilhassa ana CTA için bu denge çok kritik.
Köşe yuvarlama ve gölge meselesi
Ne yalan söyleyeyim, border-radius küçük bir detay gibi görünür ama hissiyatı ciddi değiştiriyor. Tam köşeli buton daha sert durur; hafif yuvarlatılmış olan ise daha dostane gelir. Gölge de benzer şekilde çalışıyor: abartırsanız ucuz görünür, az kullanırsanız derinlik verir.
Bunu test ettiğimde — Şişli’deki ufak ajans projesinde — iki ayrı versiyon hazırlamıştım: biri neredeyse düz karton gibiydi, diğeri hafif gölgeli ve yumuşak köşeliydi. Tahmin edin hangisi daha çok tıklandı? Evet. İkinci seçenek açık ara öndeydi. Daha fazla bilgi için MolTrust A2A v0.3: Agent Card’ı Baştan Yazmak yazımıza bakabilirsiniz. OpenAI’nin Mac Uyarısı: ChatGPT ve Codex İçin Ne Değişti? yazımızda bu konuya da değinmiştik.
Hover, focus ve active neden hayat kurtarıyor?
Komik geliyor aslında. Birçok ekip hover efektini sadece görsel makyaj sanıyor. Aslında iletişim kanalı bu — kullanıcı imleci getirince “evet burası tıklanır” mesajını almalı. Masaüstünde bu kritik olabiliyor, mobilde ise başka sinyallere ihtiyaç duyuyorsunuz, ki o ayrı bir konu. Common Lisp ile MCP Sunucusu Kurmak: Günler Değil Dakikalar yazımızda da bu konuya değinmiştik. Python CLI Dağınıklığına Son: Klix Neyi Farklı Yapıyor? yazımızda da bu konuya değinmiştik.
:hover, :focus, :active üçlüsü düzgün kurulmazsa buton ya cansız kalıyor ya da fazla şov yapıyor. İkisinin ortasını bulmak zor değil ama dikkat istiyor; yani biraz emek gerekiyor.
| Durum | Amaç | Küçük not |
|---|---|---|
| Normal | Düğmeyi tanıtmak | Sade olsun |
| Hover | Tıklanabilirliği göstermek | Mikro animasyon iş görür |
| Focus | Erişilebilirlik sağlamak | Klavye kullananlar için şart |
| Active | Basıldığını hissettirmek | Anlık geri bildirim verin |
| Disabled | Kullanılamadığını anlatmak | Neden pasif olduğu anlaşılmalı |
Erişilebilirlik kısmını atlamayın
Klavye ile gezen biri için focus halkası yoksa işiniz bitmiş sayılır. Belki sert söyledim ama gerçek bu. 2025 Nisan’ında Ankara’da yaptığım inceleme sırasında birkaç kamu portalında sadece fareyle test edilmiş bileşenler gördüm; klavyeyle dolaşınca adeta labirent başladı.
Açıkçası modern CSS size burada temiz çözümler veriyor.
.button {
background-color: #2563eb;
color: white;
border: none;
border-radius: 10px;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
transition: transform.15s ease, background-color.2s ease;
}
.button:hover {
background-color: #1d4ed8;
}
.button:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.button:active {
transform: scale(0.98);
}Küçük startup ile kurumsal yapı arasında fark ne?
Küçük startup tarafında hız önemli (kendi tecrübem). Tek geliştirici hem backend’e hem frontend’e koşturuyorsa düğmenin “fazla sanat eseri” olması kimsenin işine yaramıyor; orada hızlı uygulanabilen temiz sınıflar gerekiyor. Kurumsalda ise durum başka… design system devreye giriyor, onay süreçleri uzuyor, ancak tutarlılık kazanıyorsunuz.
Neyse uzatmayayım: startup’ta pratik çözüm çoğu zaman yeterli olurken enterprise seviyede standartlaştırılmış token yapılarıyla ilerlemek daha mantıklı oluyor. Ben bunu İstanbul’daki iki — en azından ben öyle düşünüyorum — farklı müşteri projesinde birebir gördüm. Birinde beş saat içinde sonuç aldık, diğerinde aynı işi politika nedeniyle iki hafta sonra yayımladılar…
Ve işler burada ilginçleşiyor.
- Küçük ekiplerde sade class yapısı avantaj sağlar.
- Büyük yapılarda renk değişkenleri ve component kütüphanesi şart olur.
- MVP aşamasında gösterişten çok açıklık kazandırır.
- Ekip büyüdükçe tutarlılık her şeyden değerli hale gelir.
Düğmeleri gerçekten geliştiren küçük detaylar
20+ yıl deneyimli Azure Solutions Architect. Microsoft sertifikalı bulut mimari ve DevOps danışmanı. Azure, yapay zekâ ve bulut teknolojileri üzerine Türkçe teknik içerikler üretiyor.
İlgili Yazılar
Bu içerik işinize yaradı mı?
Benzer içerikleri kaçırmamak için beni sosyal medyada takip edin.
