MENU

Web siteniz için CSS3 Butonları

Anasayfa » CSS / CSS3 » Web siteniz için CSS3 Butonları
Web siteniz için CSS3 Butonları

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.

http://2.bp.blogspot.com/-9nCVc7aq56o/T59whaksMMI/AAAAAAAAHFs/8aE792qIrfQ/s1600/site-butonlari.jpg

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.

DemoDownload

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.