ボタンコード生成用
グラデーションのボタン
2色のグラデーションで、ひときわ目を引くCTA。
用途・説明
2色のグラデーションで塗った、華やかなCTAボタンを1つ作ります。アプリやSaaSの申し込み、キャンペーンの参加ボタンなど、ページの中でいちばん目立たせたい1か所に使います。hover で色がなめらかに動く指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：今すぐはじめる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「グラデーションのボタン」を実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] ## デザイン - 背景：linear-gradient（#1463F0 から #8B5CF6 へ、左から右）、文字 #FFFFFF - 角丸：9999px（ピル型） - 高さ：56px、左右padding：32px - 文字：16px、font-weight 700、letter-spacing 0.04em、折り返さない - 影：#1463F0 の25%の色で、下方向にやわらかく ## 状態 - hover：グラデーションの位置を右へずらす（background-size を200%にして background-position を動かす）。transition 300ms - active：0.98倍に縮小 - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 - disabled：グラデーションをやめて背景 #E2E8F0、文字 #9AA5B8 ## アクセシビリティ - リンク遷移なら <a>、操作なら <button type="button"> を使う。どちらで実装したかを明記する - グラデーションの最も明るい部分でも、白い文字とのコントラスト比が 4.5:1 以上になること - 強制カラーモード（forced-colors: active）では単色の背景と枠線で表示する - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 2色・角丸・高さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。