ボタンコード生成用
押し込める立体ボタン
下に厚みを付けて、押すと沈むボタン。
用途・説明
下側に濃い色の厚みを付け、押すと沈み込むように動く立体的なボタンを1つ作ります。学習サービス、ゲーム、キャンペーンページなど、押す楽しさを出したい場面に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：スタートする
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「押し込める立体ボタン」を実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] ## デザイン - 背景 #1463F0、文字 #FFFFFF - 角丸：12px - 高さ：52px、左右padding：32px - 厚み：下に 5px、#1463F0 より一段暗い色のベタ塗り（box-shadow: 0 5px 0、ぼかしなし） - 文字：16px、font-weight 700、letter-spacing 0.04em、折り返さない ## 状態 - hover：ボタンを 1px 下げ、厚みを 4px に - active：ボタンを 5px 下げ、厚みを 0 に（完全に沈む）。transition 80ms - focus-visible：#1463F0 の 2px のアウトラインを外側に 3px 離して表示 - disabled：背景 #E2E8F0、厚み #CBD5E1、文字 #9AA5B8。押しても沈まない ## アクセシビリティ - リンク遷移なら <a>、操作なら <button type="button"> を使う。どちらで実装したかを明記する - 沈む動きで周囲の要素がずれないよう、transform で動かす - 厚みのぶん、ボタンの下に 5px の余白を確保する - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・厚み・角丸をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。