Color Sweep

Live Demo

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

Source Code

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

<button type="button" class="tb-tip tb-tip--sweep">詳細を見る</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--sweep {
  overflow: hidden;
  transition: color .32s ease, border-color .32s ease;
}
.tb-tip--sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #5548ba;
  transform: translateX(-102%);
  transition: transform .32s ease;
}
.tb-tip--sweep:is(:hover, :focus-visible, .is-active) {
  color: #fff;
  border-color: #5548ba;
}
.tb-tip--sweep:is(:hover, :focus-visible, .is-active)::before {
  transform: translateX(0);
}

@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に対応。