CSS3 ile renkli butonlar çok daha hoş hatta photoshopta hazırlanmış gibi gözüküyor. Üstelik kulanımıda çok basit.

Butonu kullanmak için üzerine taransparan bir png dosyası ve ilgili Css kodları kısaca şöyle;
Transparan png dosyası;buttonbg.png

.awesome{
background: #222 urlbuttonbg.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

Size kodları ile ebatlarını kolayca ayarlayabilirsiniz;

/* Sizes ---------- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}

background-color: kısmında butonunuza ait renkleri belirleyebilirsiniz;

/* Colors ---------- */
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}

Yazıyı yayınlamamdan birkaçdakika sonra arkadaşlarım beni uyardı; Ben Firefox 3.5.3 Kullanıyorum oyuzden köşeler oval görünüyor. Fakat arkadaşlarım ie 6 ( ki ben neden hala insanlar ie kullanır şaşıyorum) kullandığı için browserları CSS3'ü desteklemediği için köşeleri oval olarak göremiyorlar. CSS3'ü destekleyen browserlar;
Opera 10

Firefox 3.5.3

Önizleme:Türkçe
Önizleme:İngilizce
author: www.zurb.com

Etiketler: Genel

Tabiki Go-khan yazdı

---