CSS ile buton yapmak ve butona link verme! / Bilgili Konu #4

Hepinize Selamlar MC-TR Ailesi !
1 Yıl Sonra Tekrardan Bu Tür Konuları Paylaşmaya Karar Verdim Eğer Yardımcı Olursa Yorumlarda Belirterek Destek Olabilirsiniz
Bugün sizlerle css ile buton yapmayı göstereceğim bu işler biraz detay ister bunları konumda sunmaya çalıştım,
Eğer konum yararlı oldu ise veya hoşunuza gitti ise 'ELMAS' vermeyi unutmayınız!

Basitten zora doğru geçiş yapacağız artık konumuza başlayalım.
{BASIT}
2 Tane Buton Kodlarımız Vardır Aşağıda Verdik Hemen Göz Atalım,
1 - "<button> </button>"
2 - "<input> </input>"
3 - "<a> </a>"
Butonumuza link vermek istiyorsanız aşağıdaki adımları izleyiniz,
Link vermeyi 3. yöntemle yapıcağım, genellikle 3. yöntem kullanıldığından ordan anlatacağım,
İlk öncelikle kodlarımızı yerlerimize koyalım,
1 - "<a>"
2 - "<a />"
Evet arkadaşlar ikiside aynı yola çıkıyor ben 1. yolu tercih edeceğim kod kirliliği olmuyor ve kısa yöntem diğer yollarımızı izleyelim,
"<a href=" "> <a>"
href=" " Kodunu ekleyerek butona link verdik
Butonumuzun yazacağı ismi belirlemeye ne dersiniz?
<a href=" ">Fqpe Sunar</a>


{ORTA}
Yaptığımız butonu şekillendirmeye ne dersiniz
Html sayfamıza gelip CSS kodlarını yazacağımız bir panel yazıyoruz Hemen Göz Atalım,
"<style> </style>"
Panelimizi yerleştirdiğimize göre yapacağımız bütün işlemler butona olucaktır fakat butonu bu yaptığımız panele yönlendirme işlemi kalıyor hemen yapalım,
Yaptığımız butona class="vereceginizisim" yazıcağız ve yaptığımız panelede "vereceginizisim" olarak işlem gireceksiniz,
" <a href=" " class="vereceginizisim">Fqpe Sunar</a>"
Evet butonumuzu panele bağladık artık işlemlere başlayabiliriz değilmi :)

{ZOR}
Evet arkadaşlar yaptığımız panele kodlarımızı yazmaya başlıyoruz,
Butonumuzun arkasındaki rengi ayarlamaya ne dersiniz? Hemen bakalım,
(Not : renk kodlarına detaylı erişim için ziyaret edebilirsiniz)
"<style> a.vereceginizisim{ background:#EF5350; } </style>"
Evet arkadaşlar ne yaptık "background:#EF5350;" kodunu yazarak butonun arka planına renk verdik
Şimdi ise butonu büyütmeye ne dersiniz? Hemen bakalım,
"<style> a.vereceginizisim{ background:#EF5350; padding:10px 15px; } </style>"
Evet arkadaşlar ne yaptık "padding:5px 10px;" kodunu yazarak butonu büyüttük istediğiniz rakamları yazarak kendinize uyarlayabilirsiniz,
Şimdi ise butonun içindeki yazılan yazıya renk vermeyi ne dersiniz? Hemen bakalım,
"<style> a.vereceginizisim{ background:#EF5350; padding:10px 15px; color:#fff; } </style>"
Evet arkadaşlar ne yaptık "color:#fff;" kodunu yazarak butonun içindeki yazılan yazıya renk verdik istediğiniz renkleri yazarak renk uyarlaması yapabilirsiniz,
Şimdi ise butona gölge vermeye ne dersiniz? Hemen bakalım,
"<style> a.vereceginizisim{ background:#EF5350; padding:10px 15px; color:#fff; box-shadow: 0 1px 8px #000; } </style>"
Evet arkadaşlar ne yaptık "box-shadow: 0 1px 8px #000;" kodunu yazarak butona gölge verdik sizde gölge yaparak şık durdurabilirsiniz,
Butonumuzun köşelerini yuvarlak yapmaya ne dersiniz? Hemen bakalım,
"<style> a.vereceginizisim{ background:#EF5350; padding:10px 15px; color:#fff; box-shadow: 0 1px 8px #000; border-radius: 3px; } </style>"
Evet arkadaşlar ne yaptık "border-radius: 3px;" kodunu yazarak butonun köşelerini yuvarlak yaptık,
Butonumuzda yazan yazının altındaki çizgiyi kaldırmaya ne dersin? Hemen bakalım,
"<style> a.vereceginizisim{ background:#EF5350; padding:10px 15px; color:#fff; box-shadow: 0 1px 8px #000; border-radius: 3px; text-decoration:none; } </style>"
Evet arkadaşlar ne yaptık "text-decoration:none;" kodunu yazarak butonda yazan yazının altındaki çizgiyi kaldırdık,
Butonumuzun yazı tipini ve boyutunu değiştirmeye ne dersiniz? Hemen bakalım,
"<style> a.vereceginizisim{ background:#EF5350; padding:10px 15px; color:#fff; box-shadow: 0 1px 8px #000; border-radius: 3px; text-decoration:none; font:bold 15px Arial, sans-serif; } </style>"
Evet arkadaşlar ne yaptık "font:bold 15px Arial, sans-serif;" kodunu yazarak butondaki yazıyı büyüttük ve butondaki fontu değiştirdik

Evet arkadaşlar istediğiniz gibi butonunuzu özelleştirebilirsiniz fakat benden bu kadar işinize yaradıysa ne mutlu bana,
Sonuç :




1 Yıl Sonra Tekrardan Bu Tür Konuları Paylaşmaya Karar Verdim Eğer Yardımcı Olursa Yorumlarda Belirterek Destek Olabilirsiniz
Eğer konum yararlı oldu ise veya hoşunuza gitti ise 'ELMAS' vermeyi unutmayınız!

​

Yeni başlayan arkadaşlar için oldukça temelden alınmış ve yararlı bir konu almış. Bu tür yararlı konular hazırladığınız için ayrıca teşekkür ederiz.
​