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



hola


flash web tasarım
hallo


flash web tasarım
hello


flash web tasarım
Bonjour


flash web tasarım
ciao


flash web tasarım
Здравствуйте


flash web tasarım
你好為


flash web tasarım
あいさつは


flash web tasarım
हैलो


flash web tasarım
مرحبا


flash web tasarım


Yorum gönder / Send a Message








" DİĞER ÖRNEKLER

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