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