ボタンコード生成用
暗い背景用の白いボタン
濃い色の背景にのせる、白の塗りと白枠のセット。
用途・説明
濃い色の背景や写真の上に置くための、白い塗りのボタンと白い枠線のボタンのセットを作ります。ダークなファーストビュー、フッター手前の申し込みエリアなど、通常の色のボタンでは埋もれてしまう場面に使います。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メインのボタン文言]- 例：無料ではじめる
[サブのボタン文言]- 例：デモを見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「暗い背景用の白いボタン」を実装してください。 ## 表示内容 - メインボタン：[メインのボタン文言] - サブボタン：[サブのボタン文言] ## デザイン - 置く場所の背景：#1B2A44（濃いネイビー）を想定 - メイン：背景 #FFFFFF、文字 #1463F0 - サブ：背景は透明、文字 #FFFFFF、枠線 1.5px solid rgba(255, 255, 255, 0.8) - どちらも高さ 52px、左右padding 28px、角丸 9999px、文字 16px・font-weight 700 - ボタンの間隔は 12px。スマホ（480px未満）では縦に積んで全幅にする ## 状態 - hover：メインは背景を白の90%に、サブは白の12%の背景を敷く - focus-visible：白（#FFFFFF）の 2px のアウトラインを外側に 2px 離して表示 - disabled：それぞれ不透明度50%に ## アクセシビリティ - それぞれ、リンク遷移なら <a>、操作なら <button type="button"> を使う - 白い文字・枠線と背景のコントラスト比は 4.5:1 以上。写真の上に置く場合は、写真に暗い色を重ねる指定も併記する - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 文字色・枠線の色・高さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。