ボタンコード生成用
矢印付きのテキストボタン
枠も背景もない、文字と矢印だけの軽いボタン。
用途・説明
背景も枠線も持たない、文字と矢印だけのボタンを1つ作ります。カードの中の「詳しく見る」や、セクション末尾の「一覧へ」など、重要度の低い導線に向いています。見た目は小さくても、押しやすい範囲を確保する指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：詳しく見る
[リンク先]- 例：/features
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「矢印付きのテキストボタン」を1つ実装してください。 ## 表示内容 - ボタン文言：[ボタン文言]（右側に→の矢印アイコン） - リンク先：[リンク先] ## デザイン - 背景・枠線なし。文字色 #1463F0 - 文字：15px、font-weight 700 - 文字の下に 1px の下線（#1463F0）。文字との間隔は 4px - 矢印アイコン：16px の線画（インラインSVG）、文字との間隔 6px ## 状態 - hover：矢印が右に 4px 動く（0.2秒）。下線は消さない - focus-visible：2px のアウトラインを外側に 3px 離して表示、角丸 4px - 訪問済みでも色を変えない ## 押しやすさ - 見た目は小さいままで、上下に padding を足してタップ領域を高さ 44px 以上にする - padding を足したぶん、周囲のレイアウトがずれないよう負のマージンで打ち消す ## アクセシビリティ - a 要素で実装する - 矢印アイコンは aria-hidden="true" - 「詳しく見る」のように行き先が分からない文言の場合は、視覚的に隠したテキストで補う（例：料金について詳しく見る） - 色だけに頼らず、下線でリンクだと分かるようにする - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]で、このボタン1つぶんのコードを出力 - 色と矢印の動く距離をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。