Web sitenizde kullanabiliceğiniz CSS3 ile kodlanmış harika butonlar. rooteto’da buna benzer butonlar kullanılıyor gayet hoş ve güzel duruyor. 🙂 Tavsiye ederim şimdi ben size bu butonları nasıl web sitenize uyarlayacaksınız onu anlatıcam. O yüzden dikkatlice yazılarımı okuyun.
Pretty CSS3 buttons
Butonların stilleri aşağıdaki kodlarla verilmiştir.
.button, .button:visited {
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
}
Butonların büyüklükleri aşağıdaki kodlarla verilmiştir.
.small.button, .small.button:visited { font-size: 11px}
.button, .button:visited,
.medium.button, .medium.button:visited { font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited { font-size: 14px;
padding: 8px 14px 9px; }
.super.button, .super.button:visited { font-size: 34px;
padding: 8px 14px 9px; }
Son olarak butonların renkleri aşağıdaki kodlarla verilmiştir.
.pink.button, .magenta.button:visited { background-color: #e22092; }
.pink.button:hover { background-color: #c81e82; }
.green.button, .green.button:visited { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.red.button, .red.button:visited { background-color: #e62727; }
.red.button:hover { background-color: #cf2525; }
.orange.button, .orange.button:visited { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.blue.button, .blue.button:visited { background-color: #2981e4; }
.blue.button:hover { background-color: #2575cf; }
.yellow.button, .yellow.button:visited { background-color: #ffb515; }
.yellow.button:hover { background-color: #fc9200; }
Yukarıdaki buton renk kısımlarına göre renkleri dahada arttırabilirsiniz.
CSS3 Buton Kullanım Şekli
Sitenizin arka planı siyah ise butonları kullanıcağınız tablo id’si dark olmalı. Eğer açıksa arka plan light olması yeterli. Zaten indirdiğiniz dosyada nasıl yapılıcağını kodlardanda çözebilirsiniz.
Alttakilerden ilki Light olan arka kısmı beyaz. 2.olan Dark ise arka planı siyah olan. Alttaki örnekteki gibi kullanıcaksınız butonlarınızı.
<div id="light">
<ul>
<li><a class="super button pink">Pembe Buton</a>
</ul>
</div>
<div id="dark">
<ul>
<li><a class="super button pink">Pembe Buton</a>
</ul>
</div> Yukarıdaki kod sadece bir örnek.
