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

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-buton-ekleme

HTML BUTON EKLEME

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

İnput Etiketi ile Html Buton Oluşturma 

Butonların Görünümü

html-buton-kodu

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ı

Butonların Görünümü

html-buton

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ı

Butonların Görünümü

html-buton-yapma

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.

Resimli Butonun Görünümü

html-buton-olusturma

İ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.

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.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link