HTML Butona Link Nasıl Verilir? HTML Link Verme Kodları

HTML’de butona link vermenin doğru yolu, bağlantıyı bir <a> etiketiyle oluşturup CSS ile buton gibi görünmesini sağlamaktır: <a href="https://siteniz.com/" class="buton">Ana Sayfa</a>. Bu yöntem hem tüm tarayıcılarda çalışır hem de Google’ın bağlantıyı takip etmesini sağlar. <a> içine <button> koymak geçersiz HTML’dir; JavaScript’in onclick özelliğiyle yapılan yönlendirmeleri ise Google takip etmeyebilir. Aşağıda buton, normal bağlantı, e-posta, telefon ve görsel linkleri için kopyalanabilir kodlar var.

HTML Butona Link Verme (Önerilen Yöntem)

1. HTML: Bağlantıyı normal bir <a> etiketiyle yazın ve bir sınıf verin:

<a href="https://www.siteniz.com/iletisim/" class="buton">İletişime Geç</a>

2. CSS: Sınıfa buton görünümü kazandırın:

.buton {
  display: inline-block;
  padding: 12px 24px;
  background: #0f9d76;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background .2s;
}
.buton:hover,
.buton:focus { background: #0b7a5c; color: #fff; }

Sonuç şöyle görünür:

Örnek Buton: Ana Sayfa

CSS ekleyemediğiniz bir yerdeyseniz (ör. bir e-posta şablonu veya tek seferlik bir sayfa) stili doğrudan etikete yazabilirsiniz:

<a href="https://www.siteniz.com/" style="display:inline-block;padding:12px 24px;background:#0f9d76;color:#fff;text-decoration:none;border-radius:8px;">Ana Sayfa</a>

WordPress’te CSS’i Görünüm > Özelleştir > Ek CSS bölümüne ekleyebilir, HTML’i Özel HTML bloğuna veya Klasik Düzenleyicinin Metin sekmesine yapıştırabilirsiniz. Elementor gibi sayfa oluşturucularda ise buton bileşenini seçip Bağlantı alanına adresi yazmanız yeterlidir.

HTML Link Verme: Temel Kodlar

Her HTML bağlantısı <a> etiketiyle oluşturulur. Gidilecek adres href özelliğine, kullanıcının göreceği yazı etiketlerin arasına yazılır. Sık kullanılan bağlantı türleri:

<a href="https://www.anilcagliyan.com/">Ana sayfa</a>
<a href="https://ornek.com" target="_blank" rel="noopener">Yeni sekmede açılan link</a>
<a href="#sss">Sayfa içindeki SSS bölümüne git</a>
<a href="mailto:info@siteniz.com">E-posta gönder</a>
<a href="tel:+902120000000">Hemen ara</a>
<a href="/dosyalar/katalog.pdf" download>Kataloğu indir</a>

WhatsApp için de aynı yapı kullanılır: href="https://wa.me/905XXXXXXXXX" bağlantısı tıklayanı doğrudan sohbete götürür. Sabit bir WhatsApp butonu eklemek için WordPress WhatsApp eklentisi yazısına bakabilirsiniz.

Görsele link verme

<a href="https://www.siteniz.com/"><img src="/logo.png" alt="Siteniz ana sayfa" width="160" height="40"></a>

Görsel bağlantılarda alt metni, bağlantının metni yerine geçer; boş bırakmayın.

Form Gönderen Buton

Bir arama yapmak veya form göndermek gibi işlemler için <button> kullanılır:

<form action="https://www.siteniz.com/arama/" method="get">
  <input type="search" name="q" placeholder="Ara">
  <button type="submit">Ara</button>
</form>

JavaScript ile Butona Link Verme

<button type="button" onclick="window.location.href='https://www.siteniz.com/';">Ana Sayfa</button>

Bu yöntem çalışır ama önerilmez: Google ve ekran okuyucular bu butonu bir bağlantı olarak tanımaz, kullanıcılar “yeni sekmede aç” diyemez. Sayfalar arası geçiş için her zaman <a href> kullanın.

Butona Link Verirken SEO ve Erişilebilirlik

• Google yalnızca <a href> bağlantılarını takip eder. onclick ile yapılan yönlendirmeler taranmayabilir; önemli sayfalarınıza giden bağlantıları buna bırakmayın.
• Açıklayıcı buton metni kullanın: “Tıkla” yerine “Fiyatları gör”, “Kataloğu indir” gibi nereye gidileceğini anlatan metinler hem kullanıcıya hem Google’a sayfa hakkında bilgi verir.
• Klavyeyle çalışmalı: <a> ve <button> doğal olarak Tab tuşuyla seçilebilir; <div onclick> seçilemez.
• Odak görünümünü kaldırmayın: CSS’te outline: none kullanırsanız :focus için mutlaka başka bir görünüm tanımlayın.
• Mobilde parmakla tıklanabilir boyut: Butonlar en az 44-48 piksel yüksekliğinde ve aralarında boşluk olmalı.

Butona tıklayınca bir pencere açmak istiyorsanız: açılır pencere (pop-up) kodu.
Mobilde butonların en az 48 × 48 piksel olması ve aralarında boşluk bulunması gerekir; ayrıntılar için tıklanabilir öğeler birbirine çok yakın yazısına bakabilirsiniz.

Sıkça Sorulan Sorular