ボタンコード生成用
丸い矢印付きのボタン
右端の丸い矢印が動く、上品なリンクボタン。
用途・説明
文字の右端に、丸で囲んだ矢印を添えたボタンを1つ作ります。「詳しく見る」「一覧へ」「採用情報を見る」など、別のページへ進む導線に向いています。コーポレートサイトやブランドサイトでよく使われる、落ち着いた印象のボタンです。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：詳しく見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「丸い矢印付きのボタン」を実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] ## デザイン - 背景 #FFFFFF、枠線 1px solid #DCE4F0、角丸 9999px - 高さ：56px、左padding：28px、右padding：8px - 文字：16px、font-weight 700、色 #1B2A44 - 右端に直径 40px の円（#1463F0）。中に白（#FFFFFF）の右向き矢印（18px、線の太さ 2px） - 文字と円の間隔は 16px ## 状態 - hover：円の中の矢印を右へ 3px 動かす。枠線を #1463F0 に。transition 200ms - active：円を0.94倍に縮小 - focus-visible：#1463F0 の 2px のアウトラインを外側に 2px 離して表示 ## アクセシビリティ - 別のページへ進むため <a> で実装する - 矢印はインラインSVGで実装し、装飾として aria-hidden="true" を付ける - 新しいタブで開く場合は、その旨を文言かラベルで伝える - タップ領域は最低44×44px - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを出力 - 色・高さ・円の大きさをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。