Yükleniyor...

CSS düğmeler

Düğmeler «yap» kontrolleridir — gönder, kaydet, sonraki. CSS onlara net bir görünüm ve üzerine gelindiğinde, basıldığında, odaklandığında veya disabled olduğunda dürüst geri bildirim verebilir. HTML’i anlamlı tutun (button veya submit); bu ders görünüm ve durumlar hakkındadır.

Bir düğme araç seti

📊 Bir bakışta düğmeler

Parça Günlük iş
padding + background + border Sağlam, okunaklı bir düğme yüzü kurmak
border-radius Köşeleri yumuşatmak (veya büyük yarıçapla kapsül)
:hover / :active «Etkileşimliyim» ve «basıldım» göstermek
:focus-visible Klavye odak halkasını görünür tutmak
:disabled + cursor Kullanılamayan düğmeleri soldurmak; tıklanabilirken el imleci

Paylaşılan bir .btn (veya button) stilleyin ki sayfadaki ana eylemler aynı aileden görünsün. Metin alanı padding’i önceki dersti — burada tıklama hedeflerini giydiriyoruz.

Sağlam bir birincil düğme

Rahat padding, net arka plan, okunaklı metin rengi ve sakin border-radius ile başlayın. Düğmenin yakındaki metinle uyum için font: inherit tercih edin.

Temel birincil düğme

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover ve active — dürüst geri bildirim

:hover yüzü biraz koyulaştırabilir veya açabilir. :active basılmış hissettirmeli — bir ton daha koyu veya küçük bir kayma — tamamen yeni neon tema değil.

Hover ve active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

Görünen bir odak

Odak stillerini yerine koymadan asla kaldırmayın. :focus-visible klavye için net bir halka çizer ve fare tıklamalarını sakin tutar.

Görünür odak halkası

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

Disabled düğmeler görünür kalsın

Disabled düğme kullanılamaz görünmeli — daha düşük opaklık veya soluk renkler — ve el imlecini reddetmeli. Düzenden gizlemeyin.

Disabled tonu

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

Sakin bir düğme alışkanlığı

Bir birincil görünüm, net hover/active, görünür odak halkası ve soluk disabled tutun. Outline/ghost varyantlar aynı padding ve yarıçapı paylaşsın ki set akraba kalsın.

Outline arkadaşı

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

Kendiniz deneyin

  1. Birincil bir button’ı padding, arka plan, metin rengi ve border-radius ile stilleyin.
  2. :hover’ı koyulaştırın ve :active’i biraz derinleştirin.
  3. :focus-visible outline ekleyin — çıplak outline: none yok.
  4. :disabled düğmeyi soldurun ve cursor: not-allowed koyun.
  5. İsteğe bağlı: aynı padding/yarıçaplı .btn-outline ekleyin.

Sık hatalar

  • Odak yerine koymadan outline: none (klavye kullanıcıları kaybolur)
  • Mobil dokunma hedeflerini kaçıran minik padding
  • Bu dersi input/textarea stiline çevirmek (o form kontrolleriydi)
  • :hover’da marka sakinliğini bozan vahşi neon tema
  • Yalnızca a stillemek ve gerçek button’ı unutmak

Özet

  • Padding, arka plan, kenarlık ve yarıçap sağlam düğme yüzü kurar
  • :hover ve :active dürüst etkileşim geri bildirimi verir
  • Görünür bir :focus-visible halkası tutun
  • :disabled’i soldurun; tıklanabilirken cursor: pointer kullanın
  • Alan görünümünü form-kontrol dersine bırakın; burada tıklama hedeflerini giydirin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 34 / 35
Css Ders