ボタンのホバーは全体ではなくアイコンだけを少しずらす

「続ける →」のようなアイコン付きボタンは、ホバーでラベルは止めたまま矢印アイコンだけを数 px 横に動かすと、方向が伝わるのにボタン全体はガタつかない。

どんな時に使う？

「次へ」「続ける」「詳しく見る」など、矢印アイコンで進む方向を示すボタンやリンク。
ボタン全体を動かす・拡大するホバーだと落ち着かない、と感じるとき。

アイコンとラベルを同じ動きで一緒に動かすと、結局ボタン全体が動いているのと同じに見える。動くのを小さなアイコンだけにすると、視線が自然に進む方向へ向き、ラベルは読みやすいまま残る。

コード（素の CSS）

html

<button class="btn">
  続ける
  <svg class="btn-icon" aria-hidden="true">…矢印…</svg>
</button>

css

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  transition: translate 200ms ease-out;
}

.btn:hover .btn-icon,
.btn:focus-visible .btn-icon {
  translate: 0.25rem 0; /* 4px 程度で十分 */
}

@media (prefers-reduced-motion: reduce) {
  .btn-icon { transition: none; }
}

元の投稿は Tailwind で、ボタンに group、アイコンに transition-transform duration-200 group-hover:translate-x-1 を付ける形（translate-x-1 は 0.25rem）。

注意点

動かすのはアイコンだけで、ボタンの箱（ホバー判定の領域）は動かさない。考え方はホバーで持ち上げるのはカード本体ではなく中の子要素にする（下端のチラつき防止）と同じ。
戻る方向のボタン（「← 戻る」）なら負の値で左へずらす。RTL 対応が必要なら向きを :dir(rtl) で反転する。
キーボード操作でも同じ手応えが出るよう :focus-visible にも付けておく。
個別の translate プロパティは主要ブラウザで対応済み。古い環境向けなら transform: translateX() で書く。

出典

@aviralj02（2026-11-01）