Css ile Link Button Oluşturma Daha önce a etiketi ve pseudo sınıflarının (hover, active, visited) kullanımı anlatılmıştı. Bu konumuzda ise css ile buton görünümünde linkler elde etmeyi göreceğiz. Bu sayede buton tarzı nesneler için farklı programlar kullanmamıza gerek kalmayacaktır. Konu örnekleri kısmında da görebileceğiniz gibi, çok farklı tarzda linkbuttonlar hazırlayabileceksiniz. Sonraki konularımızda ise menü yapımı anlatılacaktır. Aşağıdaki kodları inceleyelim: a:link, a:visited /* linklerin normal ve ziyaret edilmiş hali belirleniyor */ { display: inline-block; background-color: #09F; color: white; text-align: center; text-decoration: none; font-weight: bold; padding-top: 10px; padding-right: 25px; padding-bottom: 10px; padding-left: 25px; margin-top: 0px; margin-right: 2px; margin-bottom: 0px; margin-left: 2px; } a:hover, a:active /* linklerin üzerine gelindiğindeki ve tıklandığındaki hali belirleniyor */ { background-color: #FFF; padding-bottom: 8px; color: #09F; padding-top: 8px; border: 2px solid #09F; padding-right: 23px; padding-left: 23px; } Bu örnekte şu noktalara özellikle dikkat edelim: a etiketi inline bir eleman olduğu için width, margin gibi özellikler bu etikette düzgün çalışmayacaktır. Bu yüzden block veya inline-block gibi bir görünüme çevirmek gerekir. inline-block yapılarak yan yana yerleşmeleri sağlanmıştır. Block yapılsaydı alt alta yerleşirlerdi. Örnekte butonlar yan yana kullanıldığından width vermek yerine yanlardan padding uygulanmıştır. Bu sayede içteki yazılar da ortada görünecektir. Height kullanmak yerine de alttan ve üstten padding tercih edilmiştir. Link içindeki metnin dikey hizasını bu yol ile daha kolay sağlayabiliriz. hover ve active durumunda border verilmiş, butonların toplam kapladığı yer değişmesin diye padding azaltılmıştır. css linkbutton örnekleri, css button görünümlü link oluşturma, css ile linkleri butona dönüştürme, a etiketi linkleri buton gibi yapma KONU İLE İLGİLİ ÖRNEKLER Gölge efekti uygulanmış, buton görünümlü link örneği Kendin Dene Bu örnekte kullanılan transition ve box-shadow özellikleri ileriki konularımızda anlatılmıştır. Button görünümlü link örneği Kendin Dene Bu örnekte kullanılan transition özelliği ileriki konularımızda anlatılmıştır. Css link button örnekleri Kendin Dene Kendin Dene butonuna tıkla, kodları incele, değiştir, sonucu gör... Css link button örnekleri Kendin Dene Kendin Dene butonuna tıkla, kodları incele, değiştir, sonucu gör...