[CSS] button要素のスタイルシート、最新テクニックを徹底解説

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの

[coliss]

button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について。

[degucho]

CSSはいつになったらテクニックとかチートシートとか人気エントリとか無くなるのか。

[o_ti]

最後の基本的なスタイルはあくまで参考だが、それまでのどのプロパティがなんであるか、なぜ使うかの解説が良い。

[yamadar]

今どきのアイコンやアクセシビリティ対応などの項目が良かった

[norip44]

ボタンのCSS

[kijtra]

どんなデザインも、初期のカクカクの頃のアフォーダンスには勝てないなw

[satotaka99]

アイコン付きで複数行はなかった…