HTML Buton Ekleme

bLastX · 22 Şub 2024

Sayfaya buton eklemenin birkaç farklı yolu vardır. HTML'de birçok elementten CSS ve javascript kullanarak buton yapılabilir. Ama buton için özel iki tag bulunur bunlar input tagı ve button tagıdır.

input Tagının Buton Olarak Kullanımı

input tagının type özelliğine button değeri verilirse eklendiği yerde buton olarak görünür. Buton texti ise value özelliğine verilen değerdir. Formda gönderme butonu olarak kullanılacaksa form tagı içindeki input tagı type özelliğine submit değeri verilir ve value özelliğine buton texti yazılır. Bu şekilde butona tıklanınca form verisi gönderilir.

HTML:

<input type="submit" value="Gönder" />

input tagının buton olarak kullanımı: Bu örnekte kullanılan butona basıldığında onclick olayı ile javascript fonksiyonu çalışıyor ve ekrana bir uyarı yazısı çıkıyor.
HTML buton ekleme kodu:

HTML:

<input type="button" value="Test" onclick="butonfonksiyonu()" />

<script>
function butonfonksiyonu(){
    alert("Butona basildi.");
}
</script>

button Tagının Kullanımı

button tagı da input tagına benzer type özelliğine button, reset veya submit değerlerinden biri verilerek buton yapılır. submit form göndermede, reset form resetlemede button ise javascript ile birlikte kullanılır.

HTML:

<button type="button" onclick="butonfonksiyonu()">Test</button>

<script>
    function butonfonksiyonu(){
        alert("Butona basildi.");
    }
</script>

span Tagından Buton Yapımı

Buton yapımı için önce span tagına CSS ile style veriyoruz. Daha sonra onclick olayına javascript fonksiyonunu yazıyoruz böylece span üzerinde tıklandığında bir buton gibi çalışıyor. Bunu div,a,p gibi birçok tagla yapabilirsiniz.

span tagından buton yapım örneği:

HTML:

<style>
    .btn{
        display: inline-block;
        padding: 4px 8px;
        border: 1px #706f6f solid;
        border-radius: 4px;
        cursor: default;
    }
    .btn:hover{
        background-color: #cfcfcf;
    }

</style>
<span class="btn" onclick="butonfonksiyonu()">Test</span>

<script>
    function butonfonksiyonu(){
        alert("Butona basildi.");
    }
</script>