Arrow Motion

Live Demo

マウスでホバー、またはTabキーでフォーカスしてください。

Source Code

必要なコードをコピーして実装に利用できます。

<button type="button" class="tb-tip tb-tip--arrow"><span>詳しく見る</span><span class="tb-tip__arrow" aria-hidden="true">→</span></button>

/* このサンプル共通のボタン基本形（単体利用可） */
.tb-tip {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-width: 156px;
  min-height: 52px;
  padding: 13px 21px;
  position: relative;
  border: 1px solid #c8d2e2;
  border-radius: 7px;
  background: #fff;
  color: #15233b;
  font: 650 14px/1.35 system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.tb-tip:focus-visible {
  outline: 3px solid #7864ed;
  outline-offset: 4px;
}

.tb-tip--arrow .tb-tip__arrow {
  display: inline-block;
  transition: transform .24s ease;
}
.tb-tip--arrow:is(:hover, :focus-visible, .is-active) .tb-tip__arrow {
  transform: translateX(7px);
}

@media (prefers-reduced-motion: reduce) {
  .tb-tip, .tb-tip::before, .tb-tip::after,
  .tb-tip > span { transition-duration: .01ms !important;
    animation-duration: .01ms !important; }
}

How to Use

HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。

Use Case

「詳しく見る」などの導線

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ端末ではフォーカス・クリック時の表示も確認してください。

Browser：モダンブラウザのCSS機能を使用。

Reduced Motion：prefers-reduced-motionに対応。