[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法

IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用

[keikoyamada1223]

CSSだけでボタンつくる

[maruyata]

CSS ボタン

[hashimoya]

IE系はfilter使用。なのでそこにそのままスクリプトで角丸を強制適用させようとすると、不具合が起きやすい。

[grover]

ie6でもそこそこにみえる。すごい！

[eriko315]

画像使わなくてもCSSだけでボタン作れるんか…

[machida_fjord]

使う

[Rewish]

ボタン

[aeka]

6もいけるのかい

[kkeisuke]

css3 border-radius, box-shadow, text-shadow

[take-june]

パクろう。すぐパクろう。

[KouJustin]

ボタン作成のサンプル

[mrtsuzui]

　そのうち自分のポートフォリオサイトでふんだんに使いたい。

[o_hiroyuki]

css3を使ったグラデーションボタン

[diveintounlimit]

今更この手のエントリのブクマが100超えてる理由が分からん。

[ngsk]

リーダーとかぶるか？

[horie1024]

復習の意味も兼ねて

[nors]

http://www.red-team-design.com/cross-browser-css-gradient-buttons

[teramako]

webkitでのグラデーションの記述、古くない？

[kams3261]

画像を使わないでグラデーションを使ったボタンの実装テク色々

[BURN]

rss

[www-tmcc]

Reader