Html Buton Ekleme

Web sitelerinin vazgeçilmez öğelerinden bir tanesi de butonlardır. Bu yazımızda Css özelliklerini kullanmadan Html buton ekleme kodlarını detaylı bir şekilde anlatacağım.

Css özelliklerini kullanarak aşağıdaki gibi buton tasarımlarının nasıl yapıldığını öğrenmek istiyorsanız Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..) yazımı okuyabilirsiniz.

Html de buton eklemek için 2 farklı Html etiketini kullanabiliyoruz. Bunlar;

button etiketi
input etiketi

Her iki şekilde de oluşturduğumuz butonların görünümü aynı olacaktır. Bu ikisinin arasındaki farkı şu şekilde açıklayabiliriz.

İnput etiketini kullandığımızda bu etiket içerisine başka Html etiketleri yerleştiremiyoruz. Ama button etiketini kullanırsak, içerisine farklı etiketlerde yerleştirebiliyoruz. İkisininde kullanımına ayrı ayrı bakalım.

Button Etiketi ile Html Buton Oluşturma

<button type="button">Html Buton</button>

<button type="button">Html Buton</button>

İnput Etiketi ile Html Buton Oluşturma

<input type="button" value="Html Buton" />

Butonların Görünümü

Gördüğünüz gibi butonların görünümünde hiçbir farklılık bulunmuyor.

Button etiketinin type parametresine 3 farklı değer verebiliyoruz. Bunlar;

button : Standart buton eklemek için kullanılır.
submit : Doldurulan form bilgilerinin sunucuya gönderilmesi için gerekli butonu eklerken kullanılır.
reset : Doldurulan form bilgilerinin temizlenmesi için gerekli butonu eklerken kullanılır.

Yapmış oldukları işlev farklı olsa da üçünün de görünümleri aynıdır. Yine bu butonları input etiketini kullanarakta oluşturabiliriz.

Html buton ekleme kodları

<!--input etiketini kullanarak buton oluşturma-->
<input type="button" value="Normal Buton" />
<input type="submit" value="Submit Buton" />
<input type="reset" value="Reset Buton" />
<!--button etiketini kullanarak buton oluşturma-->
<button type="button">Normal Buton</button>
<button type="submit">Submit Buton</button>
<button type="reset">Reset Buton</button>

<button type="button">Normal Buton</button>

<button type="submit">Submit Buton</button>

<button type="reset">Reset Buton</button>

Butonların Görünümü

HTML LİNK (BAĞLANTILI) BUTON EKLEME

Bir butona tıklandığında belirlemiş olduğumuz bir hedef adrese gitmesini istiyorsak yani bir link buton oluşturmak istiyorsak 2 farklı yöntem ile yapabiliriz.

1 Birinci yöntem olarak, button veya input etiketi ile butonlarımızı oluştururuz. Daha sonra bu butonlara tıklandığında yani click olayında Javascript kodu yazarak istediğimiz hedef adrese yönlendirebiliriz.

2 İkinci yöntem olarak, button veya input etiketi kullanmak yerine a etiketi kullanarak bir link oluştururuz. Daha sonra bu linke Css kodları yazarak buton görünümü veririz. Son olarak linke tıklandığında gidilecek hedef adresi de a etiketinin href parametresinde tanımlarız.

İki yöntem ile de örnek yapalım.

Örneğin oluşturduğumuz butonlara tıklandığında GOOGLE sayfasına yönlendirmek istediğimizi varsayalım.

Html link buton ekleme kodları

<button onclick="window.location.href='https://www.google.com/'">Google</button>
<input type="button" onClick="window.location.href='http://www.google.com/'" value="Google">
<style>
a{
text-decoration: none;
background-color: cornflowerblue;
color: white;
padding: 4px 8px;
font-size: 14px;
}    
</style>
<a href="http://www.google.com/">Google</a>

<button onclick="window.location.href='https://www.google.com/'">Google</button>

<style>

text-decoration: none;

background-color: cornflowerblue;

color: white;

padding: 4px 8px;

font-size: 14px;

}

</style>

<a href="http://www.google.com/">Google</a>

Butonların Görünümü

Resimde gördüğünüz gibi mouse ile link butonun üzerine geldiğinizde sol alt köşede belittiğimiz hedef adres görünecektir. Tıkladığımızda da o hedef adreste belirttiğimiz sayfa açılacaktır.

HTML RESİMLİ BUTON EKLEME

Son olarak resimli butonları nasıl yapabileceğimize bakalım.

Bir input etiketi tanımlıyoruz ve src parametresine resmin kaynak adresini yazıyoruz. Type parametresine de image değerini yazıyoruz.

<input type="image" src="download.png" />

Resimli Butonun Görünümü

İsterseniz bu download resmine tıklandığında istediğiniz bir dosyanın indirilmesini de sağlayabilirsiniz.

Bunun için bu kodları a etiketi içerisine yazıp, a etiketinin href parametresine dosyanın kaynak adresini yazmamız gerekiyor.

Önemli Bu şekilde indirme butonları oluştururken dikkat etmeniz gereken önemli bir nokta var. İndirilecek dosyanın bir zip dosyası olması gerekiyor.

Çünkü download butonuna tıklandığında a etiketinin href parametresindeki hedef adresi açmaya çalışacak. Bizim hedef adres bir zip dosyası olduğu için açamayacak ve tıklayan kişinin bilgisayarına zip dosyası indirilecektir.

<a href="download.zip"><br />   <input type="image" src="download.png" /><br /></a>

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Tüm Detaylarıyla Html Form Oluşturma

Html Link Verme (Yazıya, Resme, Dosyaya, İndirme Linki)

Html Resim Ekleme

Html Resme Link Verme

Yeni bir yazımda görüşmek üzere.

Html Buton Ekleme – Bağlantılı Html Buton Oluşturma