ボタン状態ジェネレーター
ボタンの文字、色、角丸、無効時の表示を設定し、6 状態をプレビューします。
使い方
使い方
- 文字、色、角丸、無効時の文字と色を編集します。
- ローカルプレビューで 6 状態を確認します。
- 生成した CSS をコピーまたはダウンロードします。
6 つの状態
default、hover、active、focus-visible、disabled、loading の例を含みます。loading は data-loading と文字ラベルを使います。
調整用の出発点
プレビューと CSS はローカル例です。公開前にコントラスト、サイズ、キーボード操作、無効状態、文言を確認してください。
外部アセットなし
標準 CSS と文字のローディング表示だけを使い、外部のフォント、画像、ライブラリ、スタイルシートを読み込みません。
よくある質問
あわせて知りたいこと
キーボードフォーカスを含みますか？
はい。:focus-visible の明確なアウトラインを含みます。
loading はどう表しますか？
data-loading 属性、小さな CSS 表示、ラベルを使います。実際の処理に合わせて置き換えてください。
完全なボタン部品ですか？
いいえ。CSS の例です。実装では button 要素、名前、disabled 属性、処理を用意してください。