Son zamanlarda Google'ın yeni imageless düğmeleri hakkında: birkaç makale var

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://stopdesign.com/eg/buttons/3.0/code.html
• http://stopdesign.com/eg/buttons/3.1/code.html
• http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

Ben bu yeni düğmeleri Gmail çalışmak. Nasıl sitemde bu ve benzeri düğmeler kullanabilir miyim? Herhangi bir açık kaynak kodlu benzer bir proje var ve hissediyorum?

Eğer/XHTML/CSS bu kullanarak bir WordPress kullanmak gibi kendi düğmesi benim paket rulo istersem, elementler ben ne için kullanabilirim? Benim ilk düşünceleri vardır:

1. Görünümünü iyileştirmek için css (tasarım madde çoğunlukla/imges içerir css hakkında konuştuk.) ile standart <input type="button">

2. Jquery özel bir iletişim "" <a> etiketler ve filtreleme için bir arama çubuğu var ki? olay özelliği düğmeye köklü getirmek için javascript Bu pop-up için masa düzeni mantıklı olurdu?

Tersine bu düğmeler Mühendisi yardimci olabilecek bazı araçlar vardır ne web üzerinde tersine mühendislik işleri, çok kötüyüm? Firefox web geliştirici kullanarak gerçekten düğmeler pop-up diyaloglar kullanılan css veya javascript eğer minified bile olsa () göremiyorum araç. Ne tarayıcı araç veya başka bir yöntem onları gözetlemek ve bazı fikirler almak için kullanabilir miyim?

Google IP herhangi bir hırsızlık, sadece benzer düğmesi işlevi oluşturmak nasıl bir fikir almak için arıyorum.

-- -- DÜZENLEME orijinal sonrası bağlantı göremedim. Üzgünüm! Çalışacağız ve yeniden yazmak asıl soru yansıtmak için

StopDesign here Bu mükemmel bir yazı var.[değiştir 20091107] Bu closure library bir parçası olarak serbest bırakıldı: button demo bkz.

Temelde özel düğmeler o shows CSS basit bit kullanılarak oluşturulur.

Efekt elde etmek için başlangıçta kullanılan 9 tablo:

Ama daha sonra üst ve alt sınırları üzerinde sol ve sağ basit 1px marjı aynı etkiyi elde etmek için kullandı.

Üç katman kullanarak sahte olduğu bir Gradyan:

Tüm kodu Custom Buttons 3.1 sayfasında bulunabilir. görüntü olmadan degrade Firefox ve Safari'de çalışıyor sadece, ancak)

Adım Adım Talimatlar

1 - Ekle aşağıdaki CSS:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - Bu aramayı aşağıdaki yollardan birini (daha fazla bağlantılar yukarıda bulabilirsiniz) Kullanın

<a href="#" class="btn"><span><span><b> </b><u>button</u></span></span></a>

ya

<button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button>