Ufak Bir Arıza Söz Konusu Yar 29 / 07 / 2013 Tarihinde Web Sitemize Yükleyeceğiz

Gonez

Gri Buton

Gri Buton

Yazar: Beytullah DALLI | Yayın Tarihi: 08 Şubat 2013 | Kategori: Css

Yazılarınızdaki linkleri butonlar sayesinde tıklanabilir hale getirebilirsiniz. İşte size bir buton örneği ve kodları

 

Css kodu

/* Butonun Genel Ayarları - gonez.tr.gg */ 
.buttongonez {
  font:15px Helvetica, Arial, sans-serif;
  line-height:18px;
  padding: 8px 14px 6px;
  display: block;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: solid 1px #c0c3c5;
  background-color:#f3f5f7;
  background-image: -webkit-linear-gradient(bottom, #dfe3e6, #fff);
  background-image: -moz-linear-gradient(bottom, #dfe3e6, #fff);
  background-image: -o-linear-gradient(bottom, #dfe3e6, #fff);
  background-image: -ms-linear-gradient(bottom, #dfe3e6, #fff);
  background-image: linear-gradient(to top, #dfe3e6, #fff);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfe3e6',GradientType=0 );
  font-size: 13px;
  font-weight: bold;
  color: #626363;
  text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5);
  text-align:center;
  width:140px;
  margin:0 auto;


}
/* Butonun üzerine gelince - gonez.tr.gg */ (hover) 
.buttongonez:hover {
  color: #787b7d;
  background-image: -webkit-linear-gradient(bottom, #e6eaec, #fff);
  background-image: -moz-linear-gradient(bottom, #e6eaec, #fff);
  background-image: -o-linear-gradient(bottom, #e6eaec, #fff);
  background-image: -ms-linear-gradient(bottom, #e6eaec, #fff);
  background-image: linear-gradient(to top, #e6eaec, #fff);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6eaec',GradientType=0 );
}
/* Butona tıklanınca - gonez.tr.gg */ (active)
.buttongonez:active {
  border: solid 1px #aab2b6;
  background-image: -webkit-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
  background-image: -moz-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
  background-image: -o-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
  background-image: -ms-linear-gradient(bottom, #f1f4f6, #cfd4d7 100%);
  background-image: linear-gradient(to top, #f1f4f6, #cfd4d7 100%);
}

Html Kodu

<div class="buttongonez">Önizleme gonez.tr.gg</div>

Yardım isteklerinizi lütfen yorumlar kısmına yazmayın. İletişim formundan bana ulaşabilirsiniz.

Anahtar kelimeler : gri , buton , linkler , daha , güzel , tıkla




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::29.04.2014, 14:47 (UTC)
webeveyn
webeveyn
Kapalı

Çok Güzel Kodlar



Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=