Buttonlar

Button Kodlari

Posted by: fatihhayrioglu Eylül 01, 2012    Comments

Butonlar web sitelerinin oluşturan önemli öğelerden biridir. Butonlar; formlardaki eylemin son noktasıdır veya bir eylemi çağırmak için kullanılan bir öğedir. Butonlar bir bağlantı çeşidi gibi düşünülsede aslında bağlantılardan farklı yapılardır. Bağlantılar site içinde dolaşmayı sağlayan yapılardır(örneğin menü gibi), butonlar ise bir eylemi gerçekleştirmek için kullanılan bir öğedir.(örnek: formun gönder butonu)

Butonların önemine binaen her yönü ile düşünülüp karar verilmesi gereken öğelerdir. Boyutu, konumu, halleri, görünüm gibi bir çok faktör düşünülerek tasarlanır ve uygulamaya geçirilir. Ben burada tasarımsal kısmına değinmeden kodlama kısmını ilgilendiren bölümlerine değinmeye çalışacağım.

Basit Butonlar

<button> ve <input type="button" /> html elemanları w3c tarafından standartlaştırılmış buton elemanlarıdır, bu elemanlar butonların ne kadar önemli öğeler olduğunun göstergesidir. 

Her ne kadar bu etiketler ile standartlaştırılsa da biz bu etiketlere bağlı kalmak zorunda değiliz. Genelde butonlar <a href="">Gönder</a> şeklinde kullanırız.

<button> ve <input type="button" /> kullanımlarında html bizim için bir buton görünüm oluşturur, ancak burada şöyle bir sorun varki farklı tarayıcı ve işletim sistemlerinde farklı farklı göründüğü için css ile ortak bir kod yazmak genelde tercih edilir. 

Butonların Halleri

Butonların kullanıcı hareketine göre çeşitli halleri vardır. Aktif buton, fare üzerine geldiğindeki hali(:hover), odaklanma durumundaki hali(:focus) olmak üzere 3 hali vardır. İyi bir tasarım için butonların tüm hallerini kullanıcıya hissettirecek ufak farklılıklar tasarımsal olarak hazırlamalıdır.

:active Butonun aktif hali
:hover Butonun fare üzerine geldiğindeki hali
:focus Buton üzerine odaklanmış hali

Basit butona bir örnek yapalım;

CSS ile Erişilebilir Formlar Yapmak – I kullandığım butonu örnek olarak alabiliriz basit butonlara

HTML kodu

CSS kodu

<input type="submit" /> yerine genelde <button> elemanını tercih ediyorum. Yukarıdaki örnekte olduğu gibi <input type="submit"" /> kullanımıda doğrudur, ancak form elemanlarında bir çok <input> olduğu zaman butona erişmek zor oluyor ek olarak bir sınıf tanımlamak gerekiyor, <button> tanımına ise daha kolay erişebiliyoruz. 

3 boyutlu buton oluşturmak

Bir iki ufak nüansla butonlarımıza 3 boyutlu bir görünüm kazandırabiliriz. Buradaki örneğimizde biz bunu bir bağlantı(<a>) ve içine <span> elemanı ekleyerek sağlayacağız. Üst ve sol kenar çizgileri açık renkli alt ve sağ kenar çizgileri daha kapalı renkli atamalar yaparız. Ayrıca bağlantı içindeki <span> etiketinin alt ve sağ kenar çizgilerinede daha kapalı renkli bir atama yaparak 3 boyutlu bir buton elde ederiz. Fare üzerinde geldiğinde kenar çizgilerine atadığımız renk değerlerini karşılıklı olarak değiştirerek daha bir efektli görünüm elde ederiz.

HTML Kodu

CSS kodumuzu yukarıdaki belirttiğimiz gib yazalım

Örneği görmek için tıklayınız.

Görselliği Arttırılmış Esnek Yapılı Butonlar

Butonların önemine yukarıda değindik, bu öneminden dolayı bir çok tasarımcı ve arayüz geliştirici butonları nasıl daha hoş ve çekici yapacağı konusunda çalışmış ve güzel örnekler çıkarmışlardır. 

Yukarıdaki görünen butonun kodunu yazalım. Butonu kodlarken dikkat edeceğimiz bir kaç husus var;

• Buton farklı alanlarda kullanılabileceği için genişleyebilir olmalıdır
• Kullanışlı olması için az kodlama ile sonuca gidilmelidir
• Hızlı yorumlandırılmalıdır. Bunun için tek resimden oluşturacağız örneğimizi
• Belli başlı tarayıcılarda çalışmalıdır. (ff, chrome, safari, opera, ie6, ie7, ie8)
• Javascript gerektirmemelidir

Yukarıda görüldüğü gibi resmimizi iki kısma böleceğiz. Sol kısmını bir elemana(muhtemlen <a>), sağ kısmını başka bir elemana(fazladan bir elman olarak <span>) ekleyeceğiz. Bir elemana birden fazla background resmi atayamadığımız için bu yöntemi uyguluyoruz.

Resmin sol kısmını butonun muhtemelen yüksek genişliğini düşünerek uzatmalıyız. Böylece buton metin genişledikçe backgorund resmi uzayacaktır ve görünüm bozulmadan standart buton görünümü sağlanmış olacaktır.

Yukarıdaki resimde bölümleri göstermek için rakamlar gösterilmiştir. Normalde resmimiz aşağıdaki gibi olacaktır.

Yukarıdaki resmi eskiden iki farklı resim olarak hazırlar ve ilgili elemanların background resmi olarak eklerdik, ancak sprite tekniği ile bu resmi tek bir resim olarak kaydediyoruz ve background-position özelliği yardımı ile ilgili elemanın background’unda ilgili background resmini gösteriyoruz. Kodu yazarsak daha iyi anlayacaksınız.

HTML kodu;

CSS Kodu

a span için eklenen

özellikleri ie6′daki genişlik sorununu gidermek için eklenmiştir.

Bu örneğe fare üzerine geldiğindeki halinide ekleyelim

Son olarakta odaklanma halini ekleyerek bu örneği bitirelim.

Örneği görmek için tıklayınız.

CSS3 ile Buton Yapmak

CSS3′ün gelişmiş özellikleri sayesinde resimlere ihtiyaç duymadan janjanlı güzel butonlar geliştirebiliyoruz. Ayrıca bu işi çok kolay bir şekilde bir iki satır kod ile yapabilme imkanı sağlıyor CSS3 bize. 

HTML kodu

Evet html kodummuz bu kadar.

CSS Kodlarını yazalım

Şimdide CSS3 özellikleri ile bu örneğimizi geliştirelim.

İlk olarak köşeleri yuvarlatıyoruz.

Gölge verelim

Metine gölge verelim

Şimdide fare üzerine geldiğindeki halinide ekleyelim.

Örneği görmek için tıklayınız.

İkinci bir örnek yapalım.

Bu sefer CSS3′ün renk geçişi(gradients) özelliğindende yararlanalım.

Örneği görmek için tıklayınız.