Interactive Hover Button

DEMO

<div class="demo-stage ihb-stage">
  <button type="button" class="ihb-btn">
    <span class="ihb-dot" aria-hidden="true"></span>
    <span class="ihb-text">詳しく見る</span>
    <span class="ihb-hover" aria-hidden="true">詳しく見る <span class="ihb-arrow">→</span></span>
  </button>
</div>

.ihb-stage { display:flex; align-items:center; justify-content:center; padding:2rem; background:#0B0B10; min-height:260px; }
.ihb-btn { position:relative; overflow:hidden; min-width:190px; min-height:48px; padding:0 1.6rem 0 2.4rem; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:#15151B; color:#EDEDED; font-weight:600; font-size:.92rem; cursor:pointer; }
.ihb-dot { position:absolute; left:1.1rem; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#D1177A; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.ihb-text { position:relative; display:inline-block; transition: transform .3s ease, opacity .3s ease; }
.ihb-hover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.4rem; color:#fff; opacity:0; transform:translateX(3rem); transition: transform .3s ease, opacity .3s ease; }
.ihb-btn:hover .ihb-dot, .ihb-btn:focus-visible .ihb-dot { transform:scale(60); }
.ihb-btn:hover .ihb-text, .ihb-btn:focus-visible .ihb-text { transform:translateX(3rem); opacity:0; }
.ihb-btn:hover .ihb-hover, .ihb-btn:focus-visible .ihb-hover { transform:none; opacity:1; }
.ihb-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  .ihb-dot, .ihb-text, .ihb-hover { transition-duration:.01ms; }
}

AI PROMPT

ボタンに乗せると左の小さな点が広がって全体を塗りつぶし、文字が横へ抜けて矢印付きの文字が入れ替わりで現れるボタン（Interactive Hover Button）をCSSだけで作って。ボタンは position:relative・overflow:hidden・角丸999px。左端に直径8pxのアクセント色の点を絶対配置し、ホバーで transform: scale(60) まで .5秒・cubic-bezier(.22,1,.36,1) で広げてボタン全体を塗る（倍率は、点の中心からボタンのいちばん遠い角までの距離 ÷ 点の半径 より大きくする）。通常の文字はホバーで translateX(3rem) しながら透明にして横へ抜けさせ、同じ文字＋「→」を入れた層を inset:0 で重ねておき、translateX(3rem)・透明 の状態から元の位置・不透明へ入れ替わりで現れさせる。入れ替わりで現れる層は aria-hidden="true" にして、読み上げは通常の文字だけにする。:hover と同じ動きを :focus-visible にも付けて、キーボードで選んだ時にも変化が分かるようにし、フォーカスのアウトラインも残す。塗った後の文字色は白で、背景とのコントラスト比4.5:1以上を確保する（#E91B89 と白は約4.2:1で届かないため、塗りは #D1177A のように少し濃くする）。@media (prefers-reduced-motion: reduce) では transition を無効化する。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。