Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1124" href="#story"><span class="tbx-1124__label">私たちの考え方</span><span class="tbx-1124__en">OUR PHILOSOPHY</span><span class="tbx-1124__dots" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></a>CSS
.tbx-1124{width:min(282px,100%);height:125px;background:#f7f2e9;border:1px solid #e5dccd;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;color:#3d5047;text-decoration:none;font-family:system-ui,sans-serif;border-radius:5px}.tbx-1124__label{font-family:serif;font-size:23px;font-weight:700;transition:letter-spacing .4s}.tbx-1124__en{font-size:9px;color:#93826e;letter-spacing:.18em;font-weight:750}.tbx-1124__dots{display:flex;gap:6px;align-items:center;height:13px;margin-top:4px}.tbx-1124__dots i{display:block;height:5px;width:5px;border-radius:50%;background:#bf8467;opacity:.15;transform:scale(.45);transition:opacity .22s,transform .35s}.tbx-1124__dots i:nth-child(2n){background:#5c9285}.tbx-1124__dots i:nth-child(1){transition-delay:0ms}.tbx-1124__dots i:nth-child(2){transition-delay:25ms}.tbx-1124__dots i:nth-child(3){transition-delay:50ms}.tbx-1124__dots i:nth-child(4){transition-delay:75ms}.tbx-1124__dots i:nth-child(5){transition-delay:100ms}.tbx-1124__dots i:nth-child(6){transition-delay:125ms}.tbx-1124__dots i:nth-child(7){transition-delay:150ms}.tbx-1124__dots i:nth-child(8){transition-delay:175ms}.tbx-1124__dots i:nth-child(9){transition-delay:200ms}.tbx-1124__dots i:nth-child(10){transition-delay:225ms}.tbx-1124__dots i:nth-child(11){transition-delay:250ms}.tbx-1124__dots i:nth-child(12){transition-delay:275ms}.tbx-1124:is(:hover,:focus-visible) .tbx-1124__dots i{opacity:1;transform:scale(1)}.tbx-1124:is(:hover,:focus-visible) .tbx-1124__label{letter-spacing:.06em}.tbx-1124:focus-visible{outline:3px solid #bf8467;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1124 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。