Videolu Anlatımlar

HTML Buton Ekleme İşlemi ve Buton Örnekleri

HTML buton ekleme

HTML buton ekleme kodu, sitesinde ya da spesifik bir makalesinde herhangi bir butona ihtiyaç duyanlar için oldukça pratik bir çözüm. Ziyaretçilerinizi başka bir siteye ya da site fonksiyonuna yönlendirmek istediğinizde, size aşağıda kodlarını vereceğim bu pratik çözümü rahatça kullanabilirsiniz.

HTML Buton Ekleme

Aşağıdaki kodu sitenizde butonu eklemek istediğiniz yerde kullandığınızda, HTML buton oluşturma işlemini başarıyla tamamlamış oluyorsunuz.

<button type="button">Örnek Buton</button>

HTML Butona Link Ekleme

Eğer HTML buton ile yönlendirme yapmak ve ziyaretçilerinizin ”HTML butona basınca yeni sayfa açma” işlemini yapmasını istiyorsanız aşağıdaki kod işinizi görecektir.


<a href="https://www.blogacmak.com" target="_blank" ><button type="button">blogacmak.com Ana Sayfası</button></a>

HTML Renkli Buton Ekleme

Eğer HTML buton renklendirme yapmak istiyorsanız, aşağıdaki koddaki background-color dan sonraki rengin ismini değiştirebilirsiniz. Rengin adını İngilizce girmeniz gerekiyor. Yazı fontunun rengini de color:white bölümünden değiştirebiliyorsunuz. White rengi yerine istediğiniz rengin İngilizcesini girmeniz gerekiyor.

Hem arka plan hem de font rengini değiştirerek HTML buton tasarımı konusunda iyi değişiklikler yapabilirsiniz.


<button style="background-color:red;color:white;width:100%;"> Renkli Buton </button>

Buradaki renklerle oynayarak farklı HTML buton stilleri elde edebilmeniz mümkün.

HTML Butona Resim Ekleme

HTML buton resim ekleme işlemini yapmak istiyorsanız ihtiyacınız olan kod aşağıdaki kod. ”src=” kısmından sonra butonda görmek istediğiniz resmin URL’sini girmeniz gerekiyor. ”href=” kısmından sonra butona tıklanınca gidilmesini istediğiniz URL’yi girebilirsiniz.

<center><a href="https://www.blogacmak.com" target="_blank" > <img src="https://www.blogacmak.com/wp-content/uploads/2020/10/blogacmak-logo.png"></a></center>
blogacmak logo

Bu kod ile beraber, HTML resim üzerine buton ekleme işlemini çok rahat bir biçimde yapabilirsiniz. Kullandığım örnekte, site logosunun üzerine tıklayınca blogacmak.com yani sitemin ana sayfasına gidiyor.

Burada ufak bir tüyo vermek istiyorum. Birçok kişi HTML buton tasarımı detaylandırması için ”HTML butona icon ekleme, HTML buton büyütme” gibi aramalar yapabiliyorlar. Aslında bunlara gerek yok.

HTML butona resim ekleme nasıl yapılır artık biliyorsunuz. Bu resmi bir buton olarak düşünebilirsiniz. Yani istediğiniz boyutlarda ve detaylarda bir buton tasarlayıp bu kodu kullanarak istediğiniz stili elde edebilirsiniz. HTML buton ekleme için birçok yol var ve bence bu yol aralarında size en çok özgürlük vereni. Birkaç deneme yapmak için bu siteyi kullanabilirsiniz.

HTML Buton Yeri Belirleme İşlemi Nasıl Yapılır?

Buton yeri belirleme işlemi için kodların başlangıcına ve sonuna kodlar eklemeniz gerekiyor. Örneğin butonun sayfanın tam ortasında yer almasını istiyorsanız ”<center>buton kodu</center>” yapısını kullanmalısınız. Bu konumlandırmanın örneğini yukarıda butona resim ekleme bölümünde yaptım.

Bundan farklı olarak butonun nerede bulunmasını istiyorsanız kodu tam olarak oraya ekleyebilirsiniz. Kodu nereye eklediyseniz HTML buton koyma işlemini orada tamamlayacaksınız.

Örneğin, HTML tabloya buton ekleme işlemini yapmak istediğinizi varsayalım. Tablonun kod eklemek istediğiniz bölümüne ”Wordpress özel html bileşeninin kodunu ve onun içine de buton kodunu” eklemeniz gerekiyor. Kısacası, sitenizde HTML kodunu nasıl gösteriyorsanız o kodu kopyalayıp tablonun istediğiniz bölümüne eklemeniz gerekiyor.

Dikkat etmeniz gereken nokta ise şu: Bu işlemleri normal düzenleme panelinden değil, sayfa kodunun göründüğü bölümden yapacaksınız.

HTML buton yeri belirleme işlemini de öğrenmenizle birlikte, HTML de buton ekleme işleminin pek çok detayına hakimsiniz diyebilirim.

Artık ihtiyacınız olan yerlerde HTML butonları kolayca ekleyebilir ve kullanıcı deneyiminizi arttırabilirsiniz. Genelde bu butonları e-ticaret sitesinde vs. görürüz ancak onlar farklı bir teknikle sunuluyor. Bu makaledeki kodlar, en basit hali diyebilirim. Bazıları ”html arama butonu ekleme, html butona ses ekleme” gibi anlatımlara da ihtiyaç duyuyorlar ancak bunlar için birkaç dili aynı anda kullanmak gerekiyor.

Umarım bu makale sizlere, HTML CSS buton ekleme konusunda yardımcı olmuştur. Anlatımın yanı sıra HTML buton örnekleri sunarak kodların neye yaradığını da göstermiş oldum.

Picture of Mehmet Erbay
Mehmet Erbay

Özet geçiyorum :) Blogger baba, bilgisayar teknisyeni, 10 yıldır online dünyada.

Nereden Başlanmalı?

Blog nasıl açılır

Blog Nasıl Açılır?

Adım adım blog veya web sitesi açmanızı sağlayacak bir rehber. 2020 Yılı için google uyumlu bir site/blog nasıl açılır?

blog yazarak para kazanmak

Blog Yazarak Para Kazanmak

Blog yazarak kendi blogunuzdan ne kadar para kazanırsınız? 1000 kişi sitenizi ziyaret etse kazancınız ne olur?

Son Yazılar

Hangi Konuda Yardıma İhtiyacın Var?

blog nasıl açılır

Site/Blog Açmak

Tüm Detaylar

wordpress güvenlik

Site Güvenliği

Siteni Koru

Wordpress hatalar

Wordpress Hatalar

Hata Kodları

wordpress site hızlandırma

Wordpress Hız

Daha Hızlı olmak

Wordpress Seo

Wordpress Seo

Google 1. Sayfa

internetten para kazanmak

Para Kazanmak

Tüm Detaylar

Rehber Makaleler

Bilgi paylaştıkça güzel :) Yazılarımın başkalarına ulaşmasını aşağıdaki paylaş butonları ile yaparsan çok sevinirim.
Mehmet Erbay
Mehmet Erbay
Blogger

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir