グラデーションと矢印付きのCSS動的サイズボタンのベストプラクティス

Question

私はZurb Foundationフレームワークを使用していますが、テキスト、グラデーショングラデーション、および右のサイズの動的なコール - アクションボタンを作成しようとしています指す矢印。私はこれを行うための3つの方法を考えることができ

：

1. は要素の両方の背景には、1つの勾配を持ち、もう一方が右側に位置矢印を持っている別の要素とスタイルをラップを持っています。

2. グラデーションの背景を持つ要素だけを持ち、矢印をimgとしてHTMLに配置します。

3. 全体の勾配と矢印を含む1つの背景画像で1つの要素を使用します。

これらの各オプションは、いくつかの方法で間違って感じている -

1. 私はスタイルのために純粋に非セマンティックのdivを持っています。

2. 純粋に文体ですが、私は自分のHTMLにimgを持っています。

3. 特に、ボタンがスケーラブルである場合、汚れたソリューションのように感じます。

これらのオプションのベストプラクティスは何ですか、または私が考慮していない方法はありますか？また、Zurb Columnsスケールの適切な場所にあるテキストと矢印を使用して、ボタンがうまくスケールされるようにするにはどうすればよいですか？

Muchos gracias！ :)

Answer 1

FirefoxとWebkitの場合、CSS3の複数の背景構文を使用して、CSSを介してグラデーションと背景イメージの両方を適用できます。

.gradAndImg { 
    background-image: url(image.png), -moz-linear-gradient(top, #ffcc00, #ffffff); 
    background-image: url(image.png), -webkit-gradient(linear, left-top, left-bottom, from(#ffcc00), to(#ffffff)); 
} 

Answer 2

あなたが財団を使用している場合、私は、あなたが試してみました、私は正確にあなたの質問を理解していないが、：

<div class="side-buttons"> 
    <button id="someid" class="nice [red:green:blue:black] button" onclick="someEvent();"/> 
</div> 

を素敵なクラスは、私はあなたが話していると考えているものと同様の勾配を追加します。サイドボタンクラスは、正しく覚えていれば、ボタンの幅を継承します。つまり、クラス「2列」のネストされたdivから、高さはテキストに応じて調整されます。

私は助けてくれました。多分あなたはあなたが持っているものといくつかのコードを投稿することができました。