furkanknyl

Css ile buton yapma

Posted on: Mart 15, 2011

Buton

İnternette buton diye arattığınızda karşınıza yüzlerce örnek çıkacaktır kimileri photoshop ile tasarlanıp css de sprite özelliği kullanılarak yapılır kimiside css ile tasarlanarak yapılır bunlar arasında daha az kod kullanıldığı ve tasarım olarak daha şık durduğu için photoshp’u tercih edenler olabilir ama daha fazla özelleştirmeler ve farklı durumlara uyarlamak için css ile buton yapma bence daha makul bir tercih o yüzde bu dersimizde sadece nasıl buton yapıldığını değil aynı zamanda daha fazla nasıl özellik eklenebileceğini anlatacağız haftalık derslerin en güzel tarafı da bu sınırsız bilgi verebilme olanağı.

Şimdi derse geçebiliriz ilk olarak buton yapımında hangi css özellikleri kullanılır onları bir görelim isterseniz.

Yukarıda butonun oluşturulması noktasında gerekli css özelliklerinin tablosunu verdik şimdi ilk butonumuzu oluşturalım isterseniz.Oluşturacağımız css kısmı iki bölümden oluşacaktır birincisi butonun şekli şemali diğeri ise :hover fonksiyonu yani buton üzerine gelince butonun biraz efekt kazanmasını sağlayacağız.

.buton{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.3);
box-shadow:0 1px 0 rgba(0,0,0,0.3);
background: -moz-linear-gradient
(19% 75% 90deg, #E0E0E0, #FAFAFA);
background: -webkit-gradient
(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));
color:#4A4A4A;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 15px;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
}
.buton:hover{
background: -moz-linear-gradient
(19% 75% 90deg,#D6D6D6, #FAFAFA);
background: -webkit-gradient
(linear, left top, left bottom, from(#FAFAFA), to(#D6D6D6));
}

Şimdi html kod yapısını görelim.

Butonunuz artık hazır bir şekilde sizi bekliyor dilerseniz bu butonu her yere entegre edebilirsiniz class=”buton” diye eklemeniz yeterli olacaktır.
İlk önce demo görüntümüze bakalım isterseniz sonra sizler için internette derledğim butonları indirip deneyebilirsiniz.
Harika buton örnekleri 1
Harika buton örnekleri 2
Harika buton örnekleri 3
Harika buton örnekleri 4
Harika buton örnekleri 5
Harika buton örnekleri 6
Harika buton örnekleri 7
Harika buton örnekleri 8
Buton örnekleri daha da çoğaltılabilinir ama bu kadarı kafi sanırım

About these ads

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter picture

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

Takip Et

Her yeni yazı için posta kutunuza gönderim alın.

%d blogcu bunu beğendi: