Link gibi davranan bir HTML butonu nasıl oluşturulur?

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.