CSS3 Renkli butonlar

Şub 23 da Genel

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