1

などの入力ボタン用に特別に設計され<input type="submit" value="Button Name">たこの丸いボタンスタイルは、単一の画像から組み立てられた引き戸の手法を使用しています。

デモ：クリックしてソースコードを確認し、動作中のコードをデモします
デモ：クリックしてMacブラウザ（Firefox、Safari、Chrome、Opera）のスタイルのビデオデモを表示します

このボタンスタイルにより、次のことが可能になります。

  • IEブラウザの長いボタン名のワイドボタンの問題を解決します。
  • ボタンがサーバー側に隠れているときに右側の引き戸がページ上に浮く場合のIEブラウザの問題を解決します。
  • ページを下にスクロールしてからバックアップするときのIEブラウザの断片化されたテキストの問題を解決します。
  • これは、コードなどでASP.Netボタンコントロールを 使用できない場合の設計者にとって最適な代替手段です。<asp:Button id="b1" Text="Submit" runat="server" />
  • サファリ、つまりFirefox、Chrome、Operaと相互互換性があります。ビデオを見る
4

1 に答える 1

3

1つの疑似クラスを変更するだけでよいと思います。

span.button input.form_button:hover {
  background-position:left -39px;
  color:#FFFFFF;
}

する必要があります

span.button:hover input.form_button {
  background-position:left -39px;
  color:#FFFFFF;
}

編集：デモソースの52行目です

于 2010-06-29T14:01:42.173 に答える