Quantcast
Channel: site butonları – Rooteto
Viewing all articles
Browse latest Browse all 10

Web siteniz için CSS3 Butonları

0
0

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.

https://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


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles


Ayetel Kürsi'nin Daveti


Asayı Musa


SCCM 2012 Client Installation issue


Yusuf Suresi (100.ayet)Kapı, kılıç ve zirve duası


Kağıtları Altına Çevirmek


Sihir ve Büyü Çözmek İçin VEFK


Ya Rakib Esmasının Mucizeleri


Arkanızdan Konuşanları Susturmak İçin Dua


irsal ve musallat etmek


Merhamet, Gnade izle | 1080p — 720p Türkçe Dublaj HD