ボタンコード生成用
完了を伝えるボタン
押したあと、チェックマークで完了を知らせる。
用途・説明
押したあとに「追加しました」「コピーしました」のように文言が変わり、チェックマークで完了を知らせるボタンを1つ作ります。カートに入れる、コピー、保存、フォローなど、その場で結果を伝えたい操作に向いています。数秒後に元の表示へ戻します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 押す前の文言。例：カートに入れる
[完了時の文言]- 例：追加しました
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「完了を伝えるボタン」を実装してください。 ## 表示内容 - 通常時の文言：[ボタン文言] - 完了時の文言：[完了時の文言] ## デザイン - 背景 #1463F0、文字 #FFFFFF、角丸 9999px - 高さ：52px、左右padding：28px、文字 16px・font-weight 700 - 完了時：文言の左にチェックマーク（20px、線の太さ 2.5px、#FFFFFF）を表示する - 通常時と完了時でボタンの幅が変わらないようにする（長いほうの文言に合わせる） ## 状態 - クリック：完了時の表示に切り替え、2.5秒後に通常の表示へ戻す - 完了表示のあいだは、もう一度押しても処理が重複しないようにする - チェックマークは 200ms で描かれるように表示する - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 ## アクセシビリティ - <button type="button"> で実装する - 完了したことを aria-live="polite" の領域でスクリーンリーダーに伝える - 完了を色やアイコンだけに頼らず、文言でも伝える - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・高さ・表示を戻すまでの時間をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。