無効状態 + ローディングボタン
1 つのボタン部品が取りうる「通常・ホバー・無効化・処理中」の 4 状態を縦に並べて見比べられるサンプルです。無効化は HTML の disabled 属性と :disabled 擬似クラスで色を抑えて cursor:not-allowed を当て、処理中は回転するスピナーと cursor:wait で「待ってくだ…
解説
1 つのボタン部品が取りうる「通常・ホバー・無効化・処理中」の 4 状態を縦に並べて見比べられるサンプルです。無効化は HTML の disabled 属性と :disabled 擬似クラスで色を抑えて cursor:not-allowed を当て、処理中は回転するスピナーと cursor:wait で「待ってください」を表現しています。状態ごとに見た目を分けることで、ユーザーが今そのボタンを押せるかどうかを直感的に判断できます。
実装で押さえたい状態管理
- 送信中は
disabledを付けて二重送信を防ぐ - 処理が終わったら必ず通常状態へ戻す
- 無効化の理由が分かるよう近くに補足を添える
色は background をまとめて差し替えれば全状態のトーンを揃えられます。スピナーの回転は @keyframes によるアニメーションなので、動きに敏感な利用者向けに prefers-reduced-motion で回転を止める配慮を足すとより親切です。disabled 属性はマウス操作だけでなくキーボードのフォーカスからも外れるため、アクセシビリティ面でも有効に機能します。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
実際のフォームで処理中状態を出すには。
送信のタイミングでボタンへ disabled を付け、処理中用のクラスを足してスピナーを表示します。サーバーの応答が返ったらクラスと disabled を外し、通常状態へ戻すのが基本の流れです。
無効化ボタンはなぜ押せないのですか。
HTML の disabled 属性が付いているためで、クリックもキーボードのフォーカスも受け付けなくなります。CSS の :disabled で色を抑え、操作できないことを見た目でも伝えています。