Bir bağlantı gibi davranan HTML butonu oluşturmak istediğimizi düşünelim. Butona tıkladığımızda bizi bir sayfaya yönlendirsin.
Bunu nasıl başarabiliriz?
HTML
HTML ile yapmak istersek <form>
elementinin action
özniteliğine hedef URL’yi belirtebiliriz.
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
Gerekirse, CSS’i formdaki metinle birlikte akışta tutmak için display: inline;
olarak ayarlayın. Yukarıdaki örnekte <input type="submit">
yerine, <button type="submit"><button>
öğesini de kullanabiliriz. Tek fark, <button>
elemanı çocuk öğelere de izin verir.
Sezgisel olarak link öğesine benzer bir şekilde buton öğesini de kullanabilmeyi beklersiniz, (<button href="https://google.com"><button>
gibi) ancak ne yazık ki bu özellik HTML standartlarına göre mevcut değil.
CSS
CSS’ye izin veriliyorsa, görünüm özelliklerini değiştirerek buton gibi görünen bir link oluşturabiliriz.
<a href="https://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Veya Bootstrap gibi birçok CSS kitaplığından birini kullanabiliriz.
<a href="https://google.com" class="btn btn-primary">Go to Google</a>
JavaScript
JavaScript’e izin veriliyorsa, window.location.href
öğesini ayarlayabiliriz.
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
Yine bu örnekte de<input type="submit">
yerine, <button type="submit"><button>
öğesini kullanabiliriz.