Bir sayfaya link veren buton nasıl yapılır
Normal bir link, yani <a href> yaz ve buton gibi görünsün diye ona CSS ile stil ver. Her link gibi sayfaya gider ve linklerin tüm özelliklerini korur: yeni sekmede açma, bağlantı adresini kopyalama ve üzerine gelince URL önizlemesi.
Bir linki butona çeviren kurallar:
display: inline-block, padding'in kutuyu genişletmesini sağlar ve onu metin satırında tutar.text-decoration: nonealt çizgiyi kaldırır.colorvebackgroundmavi link rengini değiştirir.:focus-visibleklavye kullananlara net bir odak halkası verir.
Aynı class bir <button> üzerinde de çalışır, böylece bir formun gönder butonu ile başka bir sayfaya giden bir link, her biri kendi işini yaparken birebir aynı görünebilir.
Buton mu, link mi: hangi elementi kullanmalı
Soru neye benzediği değil, tıklayınca ne olduğudur.
| Tıklayınca | Kullan | Örnekler |
|---|---|---|
| Başka bir URL'ye gider | <a href> | Kaydol, Devamını oku, Fiyatları gör, İndir |
| Bu sayfada bir şeyi değiştirir | <button type="button"> | Menüyü aç, Oynat, Sepete ekle, Şifreyi göster |
| Bir form gönderir | <button type="submit"> | Giriş yap, Ara, Kaydet |
"Link" olarak duyurulan bir link ve "buton" olarak duyurulan bir buton, ekran okuyucu kullananlara ne olacağını söyler. Klavye davranışları da farklıdır: Enter ikisini de etkinleştirir, ama Space yalnızca butonları etkinleştirir (bir linkte Space sayfayı kaydırır). Buton elementinin kendisi HTML button sayfasında anlatılıyor.
Neden bir linkin içine buton konmamalı
Çoğu kişinin ilk denediği kalıp budur:
<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>
<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>
HTML standardı ikisini de yasaklar: <a> ve <button> etkileşimli elementler içeremez. Pratikte klavye tek bir kontrol için iki Tab durağı alır, bir ekran okuyucu "link, button, Sign up" diye duyurabilir ve bir tıklamanın linki takip edip etmeyeceği tarayıcıya bağlıdır. Tek bir element seç.
Neden location.href ile onclick kullanılmamalı
Diğer yaygın geçici çözüm, URL'yi JavaScript ile ayarlayan bir butondur. Bir linkle aynı görünür:
(Örnek window.open kullanır, çünkü önizleme başka bir sayfaya gitmemeli; olağan kod location.href = '...' şeklindedir.) İkisinin üzerine gel ve sağ tıkla: yalnızca gerçek link URL'sini gösterir ve "Bağlantıyı yeni sekmede aç" ile "Bağlantı adresini kopyala" seçeneklerini sunar. Buton ayrıca Ctrl+tık ya da orta tık almaz, tarayıcı onu ziyaret edilmiş olarak işaretlemez ve arama motorları onu bir link olarak takip etmez. Hedef bir URL ise <a href> yaz.
URL açan bir form butonu
Başka bir sayfaya giden bir <button> elementinin doğru olduğu tek bir durum var: yanında veri gönderdiğinde. Klasik örnek bir arama kutusudur. Formun action değeri URL'dir ve method="get" alanları sorgu dizesine koyar:
Search'e bas: gerçek bir sayfada tarayıcı https://duckduckgo.com/?q=html+button+link adresine giderdi. Önizleme ayrılmak yerine veriyi gösterir. formaction ikinci butondan aynı formu farklı bir URL'ye gönderir.
Devre dışı link butonlar
Linklerin disabled özelliği yoktur; <a disabled> hiçbir şey yapmaz. Bir link butonu kapatmak için href özelliğini kaldır (href olmayan bir <a> link değildir, tıklanamaz ve odaklanamaz) ve hem stil hem de ekran okuyucular bilsin diye onu aria-disabled="true" ile işaretle:
Önizlemede Tab'a bas: odak yalnızca ilk butona düşer. Bazı siteler href özelliğini tutup onun yerine pointer-events: none ekler, ama bu yalnızca fareyi engeller. Link Tab ile ulaşılabilir kalır ve Enter onu yine de takip eder.
Yeni sekme ve indirme butonları
Buton gibi stil verilmiş bir linkte her link özelliği çalışmaya devam eder:
<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>
<a> kullanmak için bir neden daha: bir <button> elementinin download ya da target özelliği yoktur. target hakkında daha fazlası linki yeni sekmede açma sayfasında.
Sık yapılan hatalar
- Link içinde buton ya da buton içinde link. Davranışı öngörülemeyen geçersiz HTML.
- Düz yönlendirme için
<button onclick="location.href=...">. Yeni sekme yok, link kopyalama yok, tarama yok. - Başka sayfaya giden bir linke
role="button". Ekran okuyucu kullananlara orada bir buton olduğunu söyler, sonra sayfa değişir. Onu link olarak bırak. - "Sil" ya da "Menüyü aç" gibi eylemler için
href="#"ile buton gibi stil verilmiş linkler. Hiçbir şey yüklenmiyorsa<button type="button">kullan. <a disabled>. Linklerde bu özellik yoktur.hrefözelliğini kaldır.display: inline-blockdeğerini unutmak, bu durumda dikey padding üstteki ve alttaki satırlarla üst üste biner.
Sıkça Sorulan Sorular
HTML'de başka bir sayfaya link veren buton nasıl yapılır?
Bir link kullan ve ona buton gibi stil ver: padding, arka plan, köşe yuvarlaklığı ve text-decoration: none için CSS ile <a href="/signup" class="btn">Sign up</a>. Buton gibi görünür ve link gibi davranır; zaten bir linktir.
Bir a etiketinin içine buton koyabilir miyim?
Hayır. HTML standardı <a> içinde <button> gibi etkileşimli içeriğe izin vermez. Tarayıcılar bunu farklı ele alır, klavye kullananlar tek bir kontrol için iki Tab durağı alır ve ekran okuyucular onu kafa karıştırıcı şekilde duyurur. Tek bir element kullan.
Bir butonun href özelliği var mı?
Hayır. <button> elementinin href özelliği yoktur. Tarayıcıyı bir URL'ye göndermek için <a href> kullan ya da butonu action değeri olan bir <form> içine koy (butondaki bir formaction özelliği onu geçersiz kılar).
Bir butonda location.href ile onclick kullanmak kötü mü?
Çalışır, ama okur linklerin verdiği her şeyi kaybeder: yeni sekme için orta tık ve Ctrl+tık, Bağlantı adresini kopyala, üzerine gelince URL önizlemesi; arama motorları da onu bir link olarak takip etmez. Hedef bir URL ise <a> kullan.
Buton gibi görünen bir linki nasıl devre dışı bırakırım?
Linklerin disabled özelliği yoktur. Link olmaktan çıksın diye href özelliğini kaldır, aria-disabled="true" ekle ve ona devre dışı stili ver. Yeniden çalışması gerektiğinde href özelliğini geri koy.
