1

いくつかのボタンと画像でスタイリングの問題をエレガントに解決しようとしています。私の目標は、次のようなボタンを持つことです。

(Hacky mspaint モックアップ)

ボタンの例
(ソース: robhruska.com )

ただし、満たしたい一連の基準があります。

  • また、アイコン イメージをテキストなしのボタンとしてのみ存在させる必要があります (つまり、ボタンの背景はアイコン イメージであり、ボタンの幅/高さ = アイコン イメージの幅/高さ)。
  • アイコンのみのボタンは:hover、背景アイコンを変更する状態をサポートする必要があります。
  • テキスト ボタンは、グラデーション背景の変更をサポートする必要:hoverがありますが、アイコン自体は変更する必要はありません。

アイコン画像とグラデーション画像の両方を垂直 CSS スプライト画像で使用できます。

現在、次の行に沿って、テキスト ボタンとアイコンのみのボタンの個別のスタイル セットでこれを行うことしか考えられません。

<!-- text-button -->
<!--   button.text-button would have gradient background and border -->
<!--   button.text-button:hover would change to the hover gradient -->
<!--   .icon would have the icon background (icon border is included in image) -->
<button class="text-button">
    <div class="icon-delete">Button Text</div>
</button>

<!-- icon-only button -->
<!--   button.icon-button would have the specific icon image background -->
<!--   button.icon-button:hover would change to the hover state background -->
<!--   button styling is different than .text-button, since icon border is included in image -->
<button class="icon-button-delete"></button>

<div>不要なマークアップを追加するように見えるので、テキスト ボタンにインナーを使用するのは特に好きではありません。また、後で戻ってボタンにテキストを追加したい場合は、ボタン クラスを変更するだけでなく、いくつかのコンポーネントを変更する必要があります。また、DRY ではない、ボタン/div スタイルのいくつかの異なる組み合わせに対して、アイコン スプライトの画像位置をおそらく定義する必要があることも意味します。

私の質問を要約すると:アイコンとテキストのボタンにネストされた要素や個別のスタイルを使用するのではなく、単一のトップレベルのスタイルでこれを行うにはどうすればよいですか? <button>必ずしも<button>いずれかである必要はありません。これをエレガントに実現するのであれば、どの要素でもかまいません。

完全なコード サンプルは必要ありません。最適な方法を提案するだけです。

4

4 に答える 4

1

マークアップを少し減らすことができます。

<div class="button">
    <a class="yourIcon">Button Text</a>
</div>

.buttonはグラデーション画像を取得します。

.yourIconは、必要に応じて背景のアイコンを取得できます。

于 2010-06-25T20:49:06.990 に答える
1

個人的<img>には、アイコン div の代わりに透明な gif と CSS の背景画像を使用するだけです。そして、テキストのスパン。ボタンのテキストなしバージョンの場合は、スパンを省略してボタン クラスを調整します。

ここで大まかなデモを作成しました：http://jsfiddle.net/TTyPZ/3/

バージョン 2: http://jsfiddle.net/z9pD9/1/

于 2010-11-12T20:34:45.760 に答える
0

最大で単純化することができます。グラデーションを背景として使用し、アイコンを背景として内部に別のタグを挿入し、css vertical-alignプロパティ（％値を受け入れる）を使用して、アイコンをテキストに適切に配置します。

divタグを使用する代わりに、タグの使用を検討して<b>ください。irはytouを数バイト節約します。ちなみに、これはgoogleの手法です。

お役に立てれば

于 2010-06-25T20:15:07.887 に答える
0

2 つの別個のボタン要素を作成し、絶対配置を使用して大きなボタンの上にアイコン ボタンを配置することはできますか?

于 2010-06-25T20:40:47.537 に答える