# Küçük bir buton. Biraz karakter.

Bu yazı, sayfa düzenini ve etkileşimleri göstermek için hazırlanmış örnek içeriktir.

HTML ve CSS ile dokununca cevap veren bir buton yapalım. Küçük bir hareketin büyük bir fark yarattığı yerden başlayalım.

**Yazar:** Kurcala · Örnek yazı

**Hazırlanma:** 2026-10-23

**Seviye:** Başlangıç

**Başlamadan önce:** Temel HTML ve CSS bilgisi. Başka bir kurulum gerekmiyor.

Bir butonun görevi basittir: bir eylemi başlatmak. Ama ona dokunduğumuzda ne olduğunu anlamak da isteriz. Bu küçük deneyde süs eklemek yerine, eylem ile cevap arasındaki ilişkiyi görünür kılacağız.

Sonunda elde edeceğimiz şey aşağıda. Önce birkaç kez kurcala; sonra nasıl yapıldığına bakalım.

[Canlı buton örneğini dene](https://kurcala.net/tr/writing/playful-button#reading-body)

## 01. Önce anlam, sonra hareket

Başlangıç noktamız bir `div` değil, gerçek bir `button`. Böylece tarayıcının klavye ve odak davranışlarını baştan alırız. Düğme bir form göndermediği için türünü de açıkça belirtelim.

```html
<button class="tinker-button" type="button">
  Biraz kurcala
  <span aria-hidden="true">↗</span>
</button>
```

Ok, metnin küçük bir görsel eşlikçisi. Tek başına bir anlam taşımadığı için ekran okuyucunun onu tekrar okumasına gerek yok. Asıl eylem metnin içinde kalıyor.

## 02. Biraz ağırlık ekle

Sarı bir yüzey ve koyu bir gölgeyle küçük bir fiziksel nesne hissi verelim. Gölge bulanık değil; butonun altında ikinci bir katman gibi duruyor. Boyutları sabitlemek yerine iç boşluk ve minimum yükseklik kullanıyoruz.

```css
.tinker-button {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid #25213a;
  background: #efb933;
  color: #25213a;
  font: inherit;
  cursor: pointer;
  box-shadow: 5px 5px 0 #25213a;
  transition: transform 160ms, box-shadow 160ms;
}
```

Renk tek başına durumu anlatmıyor. Konum ve gölge de aynı bilgiyi taşıyor. Kendi projenin renklerini kullanırken bu ilişkiyi koruyabilirsin.

## 03. Dokununca cevap versin

Dokunma anında buton gölgesine yaklaşsın. Klavyeyle gelen ziyaretçi için de net bir odak çizgisi kalsın. Böylece deneyimin ana parçası fareyle üzerine gelmeye bağlı olmaz.

```css
.tinker-button:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 #25213a;
}

.tinker-button:focus-visible {
  outline: 3px solid #4857ed;
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .tinker-button { transition: none; }
}
```

Üstteki canlı örnekte tıklama sayacı da var. Bu sayaç, CSS örneğinden ayrı olarak React durumu kullanıyor; butonun gerçekten cevap verdiğini göstermek için eklendi.

## 04. Şimdi sıra sende

Gölgeyi iki piksele indir. Sonra tamamen kaldır. Hangisi bu butonun işine daha çok yarıyor? Cevap her arayüz için aynı olmak zorunda değil.

- Klavyeyle Tab kullanarak butona ulaşabiliyor musun?
- Enter ve boşluk tuşlarıyla eylemi başlatabiliyor musun?
- Dar bir ekranda metin hâlâ rahat okunuyor mu?
- Hareket azaldığında hangi butona bastığın anlaşılabiliyor mu?

Bu küçük kontrol listesi, deneyi kendi arayüzüne taşımadan önce iyi bir başlangıç. Aşağıya yaptığın değişikliği ya da takıldığın noktayı bırakabilirsin.

**Canonical:** https://kurcala.net/tr/writing/playful-button