[解決済み] Googleのイメージレスボタン

質問

最近、Googleの新しいイメージレスボタンについて、いくつかの記事がありました。

• 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

Gmail でのこれらの新しいボタンの動作がとても気に入っています。 私のサイトでこれらのボタンまたは同様のボタンを使用するにはどうしたらよいでしょうか? 同様のルック & フィールを持つオープン ソース プロジェクトはありますか?

JQuery/XHTML/CSS を使用して、このような独自のボタン パッケージを作成したい場合、どのような要素を使用すればよいでしょうか? 私の最初の考えは、次のとおりです。

1. 標準的な <input type="button"> をcssで見栄えを良くしたもの(デザイン記事ではcss/imgesの話が中心でした。)

2. Jquery javascriptで、"onclick"イベントでボタンに根ざしたカスタムダイアログを表示させることで、以下のようなものがあります。 <a> タグがあり、フィルタリングのための検索バーがあります。 そのポップアップのためのテーブルレイアウトは、正気でしょうか？

ウェブ上のリバース エンジニアリングが苦手なのですが、これらのボタンのリバース エンジニアリングを支援するために使用できるツールにはどのようなものがあるでしょうか? Firefox の Web 開発者ツール バーを使用しても、ボタンのポップアップ ダイアログで使用されている css または javascript (たとえそれが最小化されていても) を実際に見ることはできません。 どのようなブラウザ ツールまたは他の方法を使用すれば、それらを覗いて、いくつかのアイデアを得ることができますか?

私は Google の IP を盗みたいわけではなく、同様のボタン機能をどのように作成できるかのアイデアを得たいだけです。

どのように解決するのですか？

-- 編集 -- 元の投稿にリンクがありませんでした。申し訳ありません。実際の質問を反映させるために書き直してみます。

StopDesign にこの件に関する素晴らしい投稿があります。 ここで . [20091107編集] これらは、「ディアボロス」の一部としてリリースされました。 クロージャライブラリ を参照してください。 ボタンデモ .

基本的にカスタムボタンの彼は は は簡単な CSS で作成されています。

彼はもともと、効果を得るために9つのテーブルを使用していました。

しかしその後、彼は同じ効果を得るために、上下のボーダーに単純な1pxの左右のマージンを使いました。

グラデーションは3つのレイヤーを使ってごまかしています。

すべてのコードは カスタムボタン 3.1 ページにあります。(ただし、画像なしのグラデーションはFirefoxとSafariでのみ動作します)

ステップバイステップの説明

1 - 以下の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 - 次のいずれかの方法で呼び出す（詳細は上記のリンクで確認できます）。

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

または

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