CSS - Class bir  Düğme Tasarımı

Merhaba Arkadaşlar;

Yine şık ve orijinal bir çalışmamı sizinle paylaşıyorum.
Malumunuz Css artık web tasarımın olmazsa olmazlarından. Yeni başlayan arkadaşların bakış açısını değiştirmek için basit bir düğme yaptım. Yeni bir şeyler denemek isterken, işin içine uzunluğu katınca bence hoş bir çalışma çıktı.

Kısaca benim düğme diyince aklıma şu gelir. Koca bir resim yapmaktansa düğmenin iki ucunu kesip, yazının iki yanına koyarsınız ve ortasından alacağımız bir pixellik bir kesiti yazının arkasına background olarak verirsiniz. Örnekte yaptığım da yaklaşık olarak bu. Elbette bunu yapmanın birçok yolu var. ben <a> tagının içine iki tane div yerleştirdim. Div'leri <a> tagının içinde kullanmak için <a> tagınıza display:block vermeyi unutmayın. bu hem düğmelerin alt alta inmesini sağlayacak, hem de içteki div'lerin taşmasını engelleyecektir.

Düğmenin asıl hoşuma giden yanı ise üzerine gelindiğinde kısalması. Uzayabilirdi de derseniz; uzarsa tablo yapılarını bozabilir. Kısaltmak en iyisi.

Bence güzel oldu, fırsat bulursam web tasarımlarımda mutlaka kullanacağım. Eminim işinize yarayacaktır. Zipli dosyadan alıp kullanabilirsiniz.

Hepimize iyi çalışmalar...





doyaları indir


Yorum gönder









" DİĞER ÖRNEKLER
Css Background
Css Düğme



Tüm hakları saklıdır.
Sayfadaki öğelerin ticari amaçla kullanılaması, izinsiz veya kaynak göstermeden yayınlanması fikir ve sanat eserlerini koruma kanununa göre suçtur.