ボタンコード生成用
色が横から広がる枠線ボタン
ホバーすると、左から色がすっと満ちていく。
用途・説明
ふだんは枠線だけのボタンで、マウスをのせると左から色がすべるように広がって塗りのボタンに変わります。「詳しく見る」「一覧を見る」など、セクションの最後に置くリンクボタンに向いています。動きは短く控えめにして、上品な印象を保ちます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン文言]- 例：サービスを詳しく見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「色が横から広がる枠線ボタン」を実装してください。 ## 表示内容 - ボタン文言：[ボタン文言] - 文言の右に、右向きの矢印アイコン（18px） ## デザイン - 高さ 52px、左右padding 32px、最小幅 220px、角丸 0（四角） - 通常：背景 透明、枠線 1px solid #1463F0、文字 #1463F0・15px・font-weight 700・letter-spacing 0.08em - hover：左から #1463F0 の塗りが広がり、文字と矢印が #FFFFFF になる ## 動きの作り方 - 塗りは疑似要素（::before）で用意し、transform: scaleX(0) → scaleX(1)、transform-origin: left で広げる - 時間は 0.3秒、ease-out。マウスが離れたら右へ抜けるように消える（transform-origin: right に切り替える） - 文字は塗りより手前（z-index）に置く - 矢印は hover で右に 4px 動かす ## 状態 - focus-visible：hover と同じ見た目にしたうえで、2px のアウトラインを外側に表示 - active：塗りを一段暗くする ## アクセシビリティ - リンクなら a 要素、操作なら button 要素を使う - タッチ端末では hover が残らないよう、@media (hover: hover) のなかに hover のスタイルを書く - prefers-reduced-motion のときは、動きをやめて色だけ切り替える - #1463F0 と白い文字のコントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。