どのようにボタンを作る方が良いですか？

Question

私のページに「空想」ボタンを追加したいと思います。 2つの可能性があります：

• a要素を背景にして、javascript関数をclickイベントに追加します。

または

• img要素とクリックイベントにJavaScript関数を追加します。

あなたの意見は？どちらがより良い方法であり、なぜですか？

ありがとうございました！

Answer 1

可能な限り、UI要素はCSSの背景として定義する必要があります。これらはサイトコンテンツの一部ではないため、検索エンジンでインデックスを作成する必要はありません。

意味的には、Aタグはリンクを意味するため、イベントは画像ではなくAタグにフックアップする必要があります。

Answer 2

その他のオプションが含まれます：

• 背景画像
• 背景画像と枠なしでスタイリングされたボタンの要素を使用して、ボタンのように見えるようにスタイルのリンク。
• タイプサブミットまたはボタンがあり、背景イメージと境界線がないスタイルの入力要素。

特に、ロールオーバーホバー効果が必要な場合は、ボタンの要素が最も効果的です。

jQuery UIには、ほとんどすべての種類のインタラクティブな要素がファンシーなボタンに表示されるボタンプラグインがあります。

Answer 3

これは、実行しようとしている内容によって異なります。

私のプロジェクトでは、javascriptではなくボタンを使用して送信したいフォームがありますので、ボタン要素を挿入します。

<button type="submit">Sign Out</button> 

次に、CSSを使用してボタンのスタイルを設定できます。

これ以外にも、非フォームボタンやJavaScriptの背後にある機能については画像を使用しています。

Answer 4

ないあなたは「空想」ボタンがありますが、CSSで行うことができるしているものに初見で何を意味するか、またはhttp://hellohappy.org/css3-buttons/http://twitter.github.com/bootstrap/base-css.html#buttonsでの例を探してください。

もしあなたがそれよりも欲しいのであれば、HTMLでリンクを定義し、アンカータグは意味的に正しいのでCSSの画像にバックグラウンドを設定する必要があります。あなたが単に他のページにGETリクエストをしたいのであれば、Javascriptをクリックイベントに使用する理由は何もありません。

Answer 5

最初のもの。あなたはそれをスタイルするための選択肢が増えていますし、それを「テーマ化する」方が簡単です。 CSSを使って "ダークテーマ"と "ライトテーマ"をイメージすると、簡単に同じHTMLを保つことができますが、ボタンのスタイルとイメージはまったく異なります。一部のブラウザでは、イメージは必要ありません。純粋なCSSを使用して簡単にボタンを作成できます。

Answer 6

意味的に、<button>と<input type="button|submit|reset" />の要素は、ページ内の対話型要素にとって正しい選択です。

あなたは、単にそのよう<a class="button">として、<a>要素を使用しますが、いくつかのスタイルを定義し、クラスを使用し続け、その後、ボタンのような外観へのリンクをスタイリングしている場合。

かなりany element can be made into a buttonです。正しい属性を使用すると、セマンティクスが維持されます。

次は、意味的に同じですが、<img>はJSのサポートを必要とします。

<!-- the image is of some fanciful text --> 
<img src="some/image.jpg" alt="Continue" role="button" tabindex="0" /> 
<input type="image" src="some/image.jpg" alt="Continue" /> 

あなたは、単にコンテンツには影響しません装飾イメージを持っている場合は、CSSでスタイルだspanまたはdivを使用することができます：

<span role="button" tabindex="0" class="button continue-button">Continue</span> 

Answer 7

私は、JSは必要あなたはプレーンなCSSでその効果を得ることができますかなり確信していないあなたには、いくつかの並べ替えの機能を呼び出すために、ボタンをspazzする場合を除き、JSの機能は必要ありません。あなたは、単にここに...など、

を、アクティブなように（わからない彼らがこのように命名されている）CSSアクションを使用ホバー、フォーカスすることができます

は一例です：

http://jsfiddle.net/RQucV/2/

それは持っていますバックグラウンドの赤色は、最初は青色に変わり、クリックすると紫色に変わります。これは、これらのプロパティを持つ 'a'タグを使用したために可能です。

私は背景色のみを変更しましたが、フォント、背景画像、余白、罫線などの他の多くの要素を変更することもできます。

JSクリーンなので、純粋なCSSを使用するクリーナーだと思います。後でスクリプトを追加したい場合は、ブラウザにスクリプトが多すぎると悪いことが起こります。さらに、CSSの解析は実際にはJSより高速かもしれません。

あなたが純粋なCSSを持っていればちょっと別のヒント：すべてのブラウザがCSSを手掛かりにするわけではありません。あなたが使用するすべてのブラウザで同じようにスタイルシートに「reset.css」を追加することを強くおすすめします。

願っています！