ボタンコード生成用
送信中の状態を示すボタン
押したあとにスピナーを出して、二重送信を防ぐ。
用途・説明
押すと文言の横にスピナーが回り、処理が終わるまで再度押せなくなる送信ボタンを1つ作ります。フォームの送信や決済、保存など、結果が返るまで少し待つ操作に使います。待っている間にボタンの幅が変わらない指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 通常時の文言。例：送信する
[送信中の文言]- 例：送信中…
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXに詳しいフロントエンドエンジニアです。 以下の条件で「送信中の状態を示すボタン」を1つ実装してください。 ## 表示内容 - 通常時：[ボタン文言] - 送信中：スピナー ＋ [送信中の文言] ## デザイン - 背景 #1463F0、文字 #FFFFFF、高さ 48px、左右padding 24px、角丸 8px - 文字：16px、font-weight 700 - スピナー：18px の円。線の太さ 2px、白の40%透明の輪の一部だけを白にして、1周 0.8秒で回す - スピナーと文字の間隔は 8px ## 動作 - 押した直後に送信中の表示へ切り替え、処理が終わるまで再度押せないようにする - 送信中も、通常時とボタンの幅が変わらないようにする（文字数の差でレイアウトが動かないよう、最小幅を確保する） - 処理が成功・失敗したら通常時の表示に戻す - 送信中は hover の見た目の変化を止め、カーソルを progress にする ## 実装の注意 - 送信中の制御は disabled 属性ではなく aria-disabled="true" とクリックの無効化で行う（フォーカスが外れないようにするため） - 送信処理は仮の関数（2秒待つだけ）にして、差し替える箇所をコメントで示す ## アクセシビリティ - button 要素（type="submit" または "button"）で実装する - 送信中は aria-busy="true" を付ける - スピナーは aria-hidden="true"。状態の変化は、ボタン内の文言が変わることで伝える - prefers-reduced-motion のときは回転を止め、文言だけで送信中だと分かるようにする ## 出力形式 - [使用技術]で、このボタン1つぶんのコードを出力 - JavaScriptは状態の切り替えに必要な最小限にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。