CSSHTML

HTML İle Basit Bir Buton Yapma #2

Buton Yapımı

Html sitesinde buton önemli yer taşır, mesela bir butona tıklayarak başka bir sayfaya gidebilirsiniz veya bir butona değer atayarak butona istediğinizi tanımlayabilirsiniz peki bir buton nasıl yapılır;

Button Etiketi ile Html Buton Oluşturma

<body>
     <!-- Button Etiketi ile Html Buton Oluşturma -> 
   <button type="buttton">Buton</button>
</body>

İnput Etiketi ile Html Buton Oluşturma

<body>
    <!-- İnput Etiketi ile Html Buton Oluşturma ->  
  <input type="button" value="Buton" />
</body>

buton-görseli

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. Button normal bir tıklama özelliği bulundururuken, submit gönderme işlevinde, reset o formda bulunan yazıların hepsini silme işlevinde bulunur ama bunları daha sonra görücez tabiki;

Html buton ekleme kodları

<body>

  <!-- 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"&gtSubmit Buton</button>
   <button type ="reset" > Reset Buton </ button >

</body>

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 onclic="window.location.href="https://wwww.google.com/">Google</button> 
<input type="button" onClick="window.location.href='http://www.google.com/'"value="Google">
<!-- CSS kodlarımızı yazdığımız yer ->
<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>
Gördüğünüz gibi oldukça basittir dediklerimi uygularsanız kendi sayfanızda aynen bu şekilde görüceksiniz.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.
Gördüğünüz gibi buton yapımız oldukça kolay ve basittir bir sonraki dersimizde sizlere butonu CSS ile zenginleştircez. Bir sonraki dersimizde görüşmek üzere 🙂
Oylamak için tıklayınız :
[Toplam: 0 Puan: 0]
Etiketler

Bir cevap yazın

Başa dön tuşu